0

Tenho uma nav com 5 botoes, e um footer com a mesma quantidade, ao clicar nos botoes do footer eles servem de ancora para a página, mas eu preciso comparar com os itens da nav para que seja adicionado a classe "Active neles".

Só que esta me retornando

btnnav[i].attr("href") is not a function

O que fazer?

 $('footer li a').click(function(){
      var hfooter = $(this).attr("href");// Guarda o href desse botao no footer
      var btnnav = $(".btn-nav");//cria um array com todos os botoes da nav
      btnnav.removeClass("active");//tira a classs active deles
      for (var i = 0; i <= btnnav.length; i++) {
         if (btnnav[i].attr("href") === hfooter){
           /*Ao percorrer o array de classes ele deve buscar o que tem o
            href igual o botao que foi clicado, quando encontrar, 
             vai adicionar a class active*/
            btnnav[i].addClass("active");
         }
      }
  });
4
  • Tenta dar um console.log(btnnav) e mostrar o resultado
    – Jéf Bueno
    Commented 13/06/2017 às 17:28
  • 1
    Ele pega como se fosse um array mesmo, mostra todos os itens da nav, o problema é quando eu tento pegar o href.... Commented 13/06/2017 às 17:29
  • 1
    Que é um array tudo bem, mas tem que ser um array de objetos jQuery. Tem como criar um exemplo executável na pergunta? Sem um exemplo todas as possíveis respostas serão chutes.
    – Jéf Bueno
    Commented 13/06/2017 às 17:31
  • 1
    Transforme em um objeto JQuery desta forma $(btnnav[i]).attr("href") Commented 13/06/2017 às 17:35

3 Respostas 3

2

Não acho que tenha necessidade em fazer todo o processo... Pelo que você escreveu, você só quer trocar as classes active, certo? Então basta remover a atual e atribuir ao novo elemento (do evento):

$('.footer li a').click(function() {
  $(".footer").find(".btn-nav").removeClass("active"); //tira a classe active
  $(this).addClass("active"); //Adiciona a classe active ao elemento clicado.
});

EDIT:

Acho que eu entendi o que você quer...vê se a solução abaixo te atende.

$('.footer li a').click(function() {
  $(".btn-nav").removeClass("active"); //tira a classe active
  var elementos = $(".btn-nav");
  var elementoClicado = $(this);
  var textoLink = elementoClicado.text().trim();
  $.each(elementos, function() {
    if ($(this).text().trim() == textoLink) { // Compara se o elemento do "bottom" com o elemento do topo através do texto - adaptar se estiver outra forma de identificar unicamente.
      $(this).addClass("active"); //Adiciona a classe active ao elemento do topo
      //opcional:
      //elementoClicado.addClass("active"); //Adicionar classe active ao elemento clicado (bottom)
      return false;
    }
  });
});
.active {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <ul>
    <li><a href="#" class="btn-nav">Link 1</a></li>
    <li><a href="#" class="btn-nav">Link 2</a></li>
    <li><a href="#" class="btn-nav">Link 3</a></li>
    <li><a href="#" class="btn-nav">Link 4</a></li>
  </ul>
</div>
<hr /> Parte de baixo
<hr />
<div class="footer">
  <ul>
    <li><a href="#" class="btn-bottom">Link 1</a></li>
    <li><a href="#" class="btn-bottom">Link 2</a></li>
    <li><a href="#" class="btn-bottom">Link 3</a></li>
    <li><a href="#" class="btn-bottom">Link 4</a></li>
  </ul>
</div>

3
  • @marllonnasses , o seu está próximo do que eu preciso, só que eu preciso alterar a NAV quando o botão do FOOTER for clicado, exemplo, o usuario chegou no fim do site, ai, obviamente o que estará com a classe active será o ultimo icone, logo, se o usuario clicar em um link do footer ele deve alterar também o icone da NAV. se quiser, pode dar uma olhada no meu site, tiagosilveiraa.github.io Commented 13/06/2017 às 21:30
  • editei a resposta, @TiagoSilveira. Commented 13/06/2017 às 22:17
  • Eu pego pelo HREF, ou seja, se o caminho do HREF do link que eu cliquei no footer for o mesmo da nav ele adiciona a class active na nav, como eu faria dessa forma? Commented 14/06/2017 às 12:12
1

De uma maneira limpa pode-se fazer :

$( document ).ready( () => {
    $( '#navLinks .btn-nav' ).click( function () {
      $( '#navLinks' )
        .find( '.btn-nav' )
        .removeClass( 'active' );
      
      $( this ).addClass( 'active' )
    })
})
.active{
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul id="navLinks">
  
    <li> 
      <a class="btn-nav" href="#a">A</a> 
    </li>
    <li> 
      <a class="btn-nav" href="#b">B</a> 
    </li>
    <li> 
      <a class="btn-nav" href="#c">C</a> 
    </li>
     <li> 
      <a class="btn-nav" href="#d">D</a> 
    </li>
    <li> 
      <a class="btn-nav" href="#e">E</a> 
    </li>
    
  </ul>
</nav>

0

Com o código abaixo você consegue pegar o valor do href de cada item para posteriormente fazer as comparações desejadas.

jQuery(function($){
   $(document).ready(function(){
        var elements = $(".btn-nav");
	var link = "";
        for (var i = 0; i < elements.length; i++) {
           link = $(elements[i]).attr("href");
           console.log(link);
	}
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav id="menu">
<a class="btn-nav" href="link1">HTML</a> |
<a class="btn-nav" href="link2">CSS</a> |
<a class="btn-nav" href="link3">JavaScript</a> |
<a class="btn-nav" href="link4">jQuery</a> |
<a class="btn-nav" href="link5">json</a>
</nav>

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 .