Basculer une classe "active" entre cousins ​​

Question

J'ai donc actuellement trois listes non-ordonnées dans mon en-tête. Ceci est un site d'une seule page qui utilise des ancres pour naviguer. Je dois avoir une classe "active" pour basculer entre n'importe quelle ancre qui est cliquée entre ces trois listes non-ordonnées. Je suis relativement nouveau avec jQuery et la programmation en général, mais la structure de base de la page est décrite ci-dessous.

<div id="header"> 

<div id="brands-nav"> 

    <h3>Brands:</h3> 

    <ul class="navitems"> 
     <li><a href="#">Anchor</a></li> 
     <li><a href="#">Anchor</a></li> 
     <li><a href="#">Anchore</a></li> 
     <li><a href="#">Anchor</a></li> 
     <li><a href="#">Anchor</a></li> 
     <li><a href="#">Anchor</a></li> 
    </ul> 

</div> 

    <div id="mediums-nav"> 

    <h3>Mediums:</h3> 

    <ul class="navitems"> 
     <li><a href="#">Anchor</a></li> 
     <li><a href="#">Anchor</a></li> 
     <li><a href="#">Anchor</a></li> 
     <li><a href="#">Anchor</a></li> 
     <li><a href="#">Anchor</a></li> 
     <li><a href="#">Anchor</a></li> 
    </ul> 

</div> 

</div> 

    <div id="about-nav"> 

    <h3>About:</h3> 

    <ul class="navitems"> 
     <li><a href="#">Anchor</a></li> 
     <li><a href="#">Anchor</a></li> 
     <li><a href="#">Anchor</a></li> 
     <li><a href="#">Anchor</a></li> 
     <li><a href="#">Anchor</a></li> 
     <li><a href="#">Anchor</a></li> 
    </ul> 

</div> 

Alors, je suis en train de comprendre comment ajouter une classe « active » à l'une de ceux qui sont cliqué, ainsi que la suppression de la classe active de tous les cousins.

Je comprends la méthode de base pour le faire si tous les éléments sont contenus par le même parent avec quelque chose comme ça ...

$(document).ready(function(){ 

$("#mediums-nav a").click(function(){ 
    $(this).toggleClass("active"); 
    $(this).siblings("a").removeClass("active"); 
}); 

});

Alors, comment pourrais-je l'étendre à tous ses cousins?

Answer 1

Essayez ceci:

var allAnchors = $('.navitems a').click(function(){ 
    allAnchors.removeClass('active'); 
    $(this).addClass('active'); 
});