jQuery元素不受click removeclass/addClass的关注

Question

不确定如何解释这一点，但这是JS小提琴。http://jsfiddle.net/1klsoj6h/

如果您单击任何内容，然后返回"仪表板"，则不受影响。我不确定为什么会发生这种情况。这是代码：

$('#Dashboard').addClass('tabs_active').removeClass('tabs');
$('.tabs').click(function(){
    $('.tabs_active').addClass('tabs').removeClass('tabs_active');
    $(this).addClass('tabs_active').removeClass('tabs');
});

这是仪表板的HTML

<div id="Dashboard" class="tabs ">
    <i class="fa fa-tachometer fw"></i>
    <span id="dash/dash.php" class="remove">Dashboard</span>
</div>

有人有任何想法吗？

Answer 1

您应该更改语句的顺序。在添加点击事件之前删除标签类别时，#dashboard不会受到影响，因为它没有标签类别。

$('.tabs').click(function(){
    $('.tabs_active').addClass('tabs').removeClass('tabs_active');
    $(this).addClass('tabs_active').removeClass('tabs');
});
$('#Dashboard').addClass('tabs_active').removeClass('tabs');

或仅执行点击事件以选择它（而不是最后一行）：

$('#Dashboard').trigger('click');

Answer 2

更改此

 $('#Dashboard').addClass('tabs_active').removeClass('tabs');

到这个

  $('#Dashboard').addClass('tabs_active');

如果从#Dashboard中删除tabs类，则$('.tabs').click(function(){事件将不应用于它，并且它将不起作用。

演示：https：//jsfiddle.net/1klsoj6h/2/