切换堂兄之间的“活跃”类

Question

所以我目前在我的头中有三个无序列表。这是一个使用锚点进行导航的单页网站。我需要一个“活动”类来在这三个无序列表之间单击的任何锚点之间切换。我对jQuery和一般的编程还是比较新的，但是页面的基本结构如下所述。

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

所以，我想弄清楚如何将“主动”类添加到任何那些被点击，以及从任何表兄弟除去活性类的。

我明白这样做的基本方式，如果所有的元件则采用像这样同一母公司载...

$(document).ready(function(){ 

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

}）;

那么我该如何去扩展它所有的堂兄弟？

Answer 1

试试这个：

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