Grab <a> tag link with javascript. For active menu script

Question

I am making a template and need to put the page active with color different from the other buttons. For this I need to take the contents of one and compare with the page link.

If it’s the same I put a new class in the button where you 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 don’t have to put the whole script, I just want to know how to get the link inside a tag :

<a href="">    

I looked on the internet but could not find, now if you want to put the whole script would be better. But you just need to explain how you get the link to get the link of what the rest I know how to do and after I do I put here the complete answer.

Answer 1

Try it like 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);
}

Answer 2

You can do so to compare and know if a link is the same as the page you are on:
_{(but this should be done on the server. Doing in Javascript is correcting in the wrong place)}

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:

>Fetch all anchors inside #lista_menu
> go fetch the current address (url)
> iterate all tags
> verify whether the href of each tag is part of the current page url.

Answer 3

As stated earlier, here’s the script 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 test time.

Answer 4

If you are using a server side language... PHP, for example, can be used 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>