javascript - 在具有相似类的多个元素上切换类

Question

我有一个带有链接的导航，其中包含与页面各部分相同的类。请参阅 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>

现在，我想在单击链接时将“active”类添加到链接和部分。我已经使用以下 jQuery 实现了此功能:

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

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

    var activeClass = this.className;

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

});

唯一的问题是类无法切换。当我单击事件链接时，我希望链接和部分的事件状态消失。我用 if 语句尝试过:

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

我想我在这里缺少一些更深层次的知识，有人可以帮助我吗？提前致谢。

fiddle

Answer 1

您必须从 removeClass 语句中排除当前单击的类，否则 toggleClass 将始终添加该类，就像您总是先删除它一样。

当您获取className时，您还应该从className中删除active，否则有时您会得到one active等，而不是只是一个。

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

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

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

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

});

FIDDLE