Skip to main content
adicionou 897 caracteres ao conteúdo
Fonte Link
Marllon Nasser
  • 3,9mil
  • 15
  • 29

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

Exemplo:EDIT:

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

$('.footer li a').click(function() {
  $(".footer").find(".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 clicadodo topo
      //opcional:
      //elementoClicado.addClass("active"); //Adicionar classe active ao elemento clicado (bottom)
      return false;
    }
  });
});
.active {
  color: red;
  background-color: lbue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">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-navnav">Link active">Link4</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>

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

Exemplo:

$('.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.
});
.active {
  color: red;
  background-color: lbue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
  <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 active">Link 4</a></li>
  </ul>
</div>

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>

adicionou 892 caracteres ao conteúdo
Fonte Link
Marllon Nasser
  • 3,9mil
  • 15
  • 29

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

Exemplo:

$('.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.
});
.active {
  color: red;
  background-color: lbue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
  <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 active">Link 4</a></li>
  </ul>
</div>

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(){
   $(".btn-nav").find(".active").removeClass("active"); //tira a classe active
   $(this).addClass("active");//Adiciona a classe active ao elemento clicado.
});

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

Exemplo:

$('.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.
});
.active {
  color: red;
  background-color: lbue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer">
  <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 active">Link 4</a></li>
  </ul>
</div>

Fonte Link
Marllon Nasser
  • 3,9mil
  • 15
  • 29

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(){
   $(".btn-nav").find(".active").removeClass("active"); //tira a classe active
   $(this).addClass("active");//Adiciona a classe active ao elemento clicado.
});