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>