Get tag link a with javascript. For active menu script

Navigation
1

I'm making a template and I need to put the active page in different color from the other buttons. For this I need to get the contents of one and compare it with the page link.

If it is the same I put a new class on the button where it will pull the css from the active menu. 

<script type="text/javascript">
  function mostrarAtivo(tag){
    var tag_li = document.getElementById('lista_menu');
    var tag_a = tag_li.getElementsByTagName('a');
    for (i=0; i<tag_a.length; i++ )
    {
      /* pegar o link da tag a e compara com o link da página, se for igual o link é o link ativo
 (recebe uma classe chamada "active"). */
    } 
  }
</script>

Well, you do not need to put the whole script, I just want to know how to get the link inside a tag: 

<a href="">

I searched the internet but could not find it, now if you want to put the whole script would be better. But you just have to explain how to get the link to get the link from the rest of the file I know how to do and after I do I post the complete answer here.

    
asked by anonymous 24.07.2015 / 16:28

4 answers

3

Try this: 

document.getElementById("seuID").href;

or 

document.getElementById("seuID").getAttribute("href");

In your case: 

var tag_li = document.getElementById('lista_menu');
var tag_a = tag_li.getElementsByTagName('a');
for (i=0; i<tag_a.length; i++ )
{
    vars = document.getElementsByTagName("a")[i].getAttribute("href");
    console.log(vars);
}
    
24.07.2015 / 16:31
1

You can do this to compare and know if a link is the same as the page you're on:
(but this must be done on the server. > 

function mostrarAtivo(tag) {
    var tags = document.querySelectorAll('#lista_menu a');
    var url = location.pathname;
    for (i = 0; i < tags.length; i++) {
        var link = tags[i].href;
        if (url.indexOf(link) != -1) tags[i].classList.add('active');
    }
}

The steps are:

> Look for all anchors within #lista_menu
> go get the current address (url)
> iterate the tags all
> check that the href of each tag is part of the url of the current page.

    
25.07.2015 / 21:09
0

If you are using some server side language ... PHP, for example, you can use it like this.      

    # http://localhost/meusite/pagina.php

    $Url = $_SERVER['SCRIPT_NAME']; # pagina.php

?>
<ul>
    <li <?php $class = ($url == 'pagina.php') ? 'current' : '' ?><a href="pagina.php">Link 1</a></li>
    <li <?php $class = ($url == 'pagina-1.php') ? 'current' : '' ?><a href="pagina-2.php">Link 2</a></li>
    <li <?php $class = ($url == 'pagina-2.php') ? 'current' : '' ?><a href="pagina-3.php">Link 3</a></li>
    <li <?php $class = ($url == 'pagina-3.php') ? 'current' : '' ?><a href="pagina-4.php">Link 4</a></li>
</ul>
    
24.07.2015 / 16:43
0

As stated earlier, here is the script that I said I would post. 

<script type="text/javascript">
  var tag_li = document.getElementById('lista_menu');
  var tag_a = tag_li.getElementsByTagName('a');
  for (i=0; i<tag_a.length; i++ )
  {
    console.log(tag_a.length);
    console.log(i);
    vars = tag_li.getElementsByTagName("a")[i].getAttribute("href");
    console.log(vars);
    vars2 = window.location.href;
    console.log(vars2);
    if (vars == vars2){
      console.log("achou");
      tag_li.getElementsByTagName("a")[i].parentNode.id = "li";
    }
  }
</script>

The console.log is just to get an idea of how the script works at the time of testing.

    
24.07.2015 / 20:40
How to transform array into string with php Event when mouse is pulled from window [closed]