1

Estou fazendo um template e preciso colocar a página ativa com cor diferente dos outros botões. Para isto eu preciso pegar o conteúdo de um e comparar com o link da página.

Se for igual eu coloco uma nova classe no botão aonde irá puxar o css do menu ativo.

<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>

Bom não precisa colocar o script inteiro, só quero saber como pega o link dentro de uma tag :

<a href="">    

Procurei na internet porém não consegui achar, agora se vocês quiserem colocar o script inteiro seria melhor. Porém só precisa explicar como pega o link de pegar o link do a que o resto eu sei fazer e depois que eu fizer eu posto aqui a resposta completa.

2
  • Que linguagem server-side você está usando ? 24/07/2015 às 14:31
  • estou utilizando o twig, twig.sensiolabs.org É a linguagem que eles usam para a API. 24/07/2015 às 16:14

4 Respostas 4

4

Tente assim:

document.getElementById("seuID").href;

ou

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

No seu caso:

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);
}
2
  • Vou testar para ver, porém acredito que teria que ser por getElementByTagName 24/07/2015 às 14:34
  • No seu caso, sim. Mas no geral costuma-se usar class ou id para identificar o elemento. Só indiquei o que eu costumo usar. ;)
    – buback
    24/07/2015 às 15:44
1

Como dito anteriormente, aqui está o script que falei que iria postar.

<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>

O console.log é só para ter uma idéia do funcionamento do script na hora do teste.

1

Podes fazer assim para comparar e saber se um link é o mesmo que a página em que estás:
(porém isto deve ser feito no servidor. Fazer no JavaScript é corrigir no sítio errado)

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');
    }
}

Os passos são:

>Ir buscar todas as ancoras dentro de #lista_menu
> ir buscar o endereço atual (url)
> iterar as tags todas
> verificar se o href de cada tag faz parte do url da página atual.

0

Se estiver usando alguma linguagem server side... PHP, por exemplo, dá para utilizar assim.

    # 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>
1
  • Estou utilizando uma API da Xtech, então a pessoa cadastra o menu em um sistema em um painel de admin. Logo a melhor solução seria em Javascript mesmo. (Já que eu não sei qual vai ser o nome do menu) 24/07/2015 às 16:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .