javascript - 在表兄弟之间切换 "active"类

Question

所以我的标题中目前有三个无序列表。这是一个使用 anchor 进行导航的单页网站。我需要一个“事件”类来在这三个无序列表之间单击的任何 anchor 之间进行切换。我对 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');
});