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

在表兄弟之间切换“活跃”类

1 个答案: