Question

我有一些html / jQuery用于实现一些标签式导航。当选择一个新选项卡时，我需要使它的css类为“active”，并将之前的tabs css类更改为“inactive”。为此，我在click事件中使用了以下代码：

$("ul.tabs li").removeClass("active"); //Remove any "active" class
$("ul.tabs li").addClass("inactive");  //Set all to "inactive"
$(this).removeClass("inactive");  //remove "inactive" from the item that was clicked
$(this).addClass("active"); //Add "active" class to the item that was clicked.

这有效，但我很好奇是否有人找到了更干净/更优雅的方法呢？

Answer 1

$("ul.tabs li").click(function(){
    $(".active").removeClass("active").addClass("inactive");
    $(this).removeClass("inactive").addClass("active");
});

工作示例：http://jsfiddle.net/4uMmc/

Answer 2

为什么不将inactive样式作为默认样式？然后，你可以这样做：

$("ul.tabs li").removeClass("active");
$(this).addClass("active");

Answer 3

$(this).removeClass("inactive").addClass("active").siblings().removeClass("active").addClass("inactive");

请注意，最好不要在元素的$('ul.tabs li')事件中使用click，因此，如果您有许多.tabs，则只会点击被点击元素的那个。< / p>

但是，最好编写CSS，这样你就不必使用inactive类，如下所示：

ul.tabs li {…} /* Inactive state */
ul.tabs li.active {…} /* Active state */

Answer 4

为什么不简单地找到该类的元素然后将其删除？您可以将其简化为两行：

$('.active').removeClass('active').addClass('inactive');
$(this).addClass('active').removeClass('inactive');

Answer 5

这至少只会评估一次选择器。

$("ul.tabs li").removeClass("active").addClass("inactive");
$(this).removeClass("inactive").addClass("active");

我同意其他建议，最好摆脱不活跃的课程。使选项卡的默认格式为“非活动”。然后，根据需要添加/删除活动类。将“活动”类的CSS放在选项卡的默认CSS之后，它将取代默认状态。然后，您的代码可能就是这样：

$("ul.tabs li.active").removeClass("active");
$(this).addClass("active");

Answer 6

使用:not()比.not()更快而不是添加和删除类使用jQuery toggleClass() 您应该像这样编写代码：

    $("ul.tabs li:not(" + $(this) + ")").toggleClass("active", "inactive");
$(this).addClass('active');

是否有更优雅的方式将css应用于“除此之外的所有元素”？

6 个答案: