Javascript 在具有类似类的多个元素上切换类

我有一个带有链接的导航，其中包含与页面各部分相同的类。请参阅HTML：

<a href="#" class="one">Link 1</a>
<a href="#" class="two">Link 2</a>
<a href="#" class="three">Link 3</a>

<section class="one">Section 1</section>
<section class="two">Section 2</section>
<section class="three">Section 3</section>

唯一的问题是这些类不会切换。我希望在单击活动链接时，链接和节的活动状态都消失。我用if语句这样做：

if($(this).hasClass('active')){
    var activeClass = this.className;
    $('.' + activeClass).removeClass('active');
}

我想我错过了一些更深层次的知识，有人能帮我吗？提前谢谢

---

您必须从

removeClass

语句中排除当前单击的类，否则

toggleClass

将始终添加该类，因为您总是先删除它

当您获得

类名时，还应该从
类名
中删除
活动的
，否则您有时会得到
一个活动的
等，而不仅仅是
一个

$('a').click(function(){

    var activeClass = '.' + $.trim(this.className.replace('active',''));

    $('.active').not(activeClass).removeClass('active');

    $(activeClass).toggleClass('active');

});

您只需要稍微修改一下脚本

<style>
a.active{

    color: red


}

section{

    height: 200px;
    width: 100%;
    border: 1px solid black;
    margin: 10px 0 10px 0;
}

section.active{

    border-color: red!important;
}


</style>


<a href="#" class="one active">Link 1</a>
<a href="#" class="two">Link 2</a>
<a href="#" class="three">Link 3</a>

<section class="one active">Section 1</section>
<section class="two">Section 2</section>
<section class="three">Section 3</section>






<script>
    $(document).ready(function(){ 

        $('a').on('click', function(){

        //remove all active
        $('.active').removeClass('active');

       //get the class of this link
        var activeClass = $(this).attr('class');

        $('.' + activeClass).addClass('active');

    });//end a.bind

});//end doc.ready

<script>


a、 活跃的{
颜色：红色
}
部分{
高度：200px；
宽度：100%；
边框：1px纯黑；
利润率：10px 0 10px 0；
}
第1节活动{
边框颜色：红色！重要；
}
第一节
第二节
第三节
$（文档）.ready（函数（）{
$（'a'）。在（'click'，function（）上{
//删除所有活动的
$（'.active'）.removeClass（'active'）；
//获取此链接的类
var activeClass=$（this.attr（'class'）；
$（'.+activeClass）.addClass（'active'）；
})//end a.bind
});//结束文件准备好了吗

我不太明白你想干什么。首先，您说您希望在单击链接时将“活动”类添加到链接和节中。然后当你点击链接时，你说你想删除“活动”类。这两条语句相互矛盾。不，它们不矛盾，我希望当我再次单击某个活动链接时，该链接处于非活动状态。这就是上面的代码不起作用的地方。阿德内奥的回答帮了我的忙。：）
<style>
a.active{

    color: red


}

section{

    height: 200px;
    width: 100%;
    border: 1px solid black;
    margin: 10px 0 10px 0;
}

section.active{

    border-color: red!important;
}


</style>


<a href="#" class="one active">Link 1</a>
<a href="#" class="two">Link 2</a>
<a href="#" class="three">Link 3</a>

<section class="one active">Section 1</section>
<section class="two">Section 2</section>
<section class="three">Section 3</section>






<script>
    $(document).ready(function(){ 

        $('a').on('click', function(){

        //remove all active
        $('.active').removeClass('active');

       //get the class of this link
        var activeClass = $(this).attr('class');

        $('.' + activeClass).addClass('active');

    });//end a.bind

});//end doc.ready

<script>