有没有更优雅的方法将CSS应用于“除了这个元素之外的所有元素”？

Question

我有一些html/jQuery代码，用于实现选项卡导航。当选择一个新的选项卡时，我需要将其css类设置为"active"，并将以前的选项卡的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.

这个方法可以实现，但我想知道是否有更简洁/更优雅的方式来实现这个目标？

- Abe Miessler

---

你应该使用方法链来使代码更加优雅。这样，你就不需要调用四次jQuery构造函数，而只需要两次：$().removeClass().addClass()。 - gion_13

Answer 1

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

演示代码请参考：http://jsfiddle.net/4uMmc/

- Robert

---

啊，比我快一点点！=D - Tejs

哦，这看起来很有前途。我想我得将最后一行改为 $(this).removeClass().addClass("active");。 - Abe Miessler

指定类名的原因是为了防止一个特定的<li>元素附加多个类。但是，是的，您可以轻松地将其删除以删除该元素的所有类。 - Robert

应该只有“未激活/已激活”两种状态，所以我认为你的第一个版本可以使用。 - Abe Miessler

Answer 2

为什么不把“inactive”样式设为默认样式呢？这样你就可以这样做： 。

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

- FishBasketGordo

---

嗯，所以li标签会同时具有“未激活”和“激活”类？如果这样做会导致样式冲突吗（抱歉，我不是CSS专家）？ - Abe Miessler

是的，li元素将拥有两个类，并且样式可能会冲突。我忘记哪一个会胜出了。我认为在类列表中最后一个会胜出。然而，有时候一个元素拥有多个类是很有用的，只是在这种情况下不是。 - FishBasketGordo

CSS中没有真正的“冲突”。在一个对象上有两个类是完全可以的。如果两个类定义了相同样式属性的不同版本，那么最后一个会生效。所以，你只需要在CSS文件中让“活动”规则在“非活动”规则之后即可。如果一个对象同时拥有这两个类，那么“活动”规则将控制它，这也是你想要的。 - jfriend00

如果两个定义了相同样式属性的不同版本，那么最后一个会覆盖前面的。这就是我所说的冲突。我想用“覆盖”可能更合适一些。 - FishBasketGordo

Answer 3

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

请注意，在元素的 click 事件中最好不要使用 $('ul.tabs li')，这样如果您有很多 .tabs，只会影响点击元素所在的那一个。

然而，更好的方法是编写 CSS，这样您就不必使用 inactive 类，像这样：

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

- kizu

Answer 4

为什么不直接查找具有该类的元素，然后将其删除？您可以简化为两行代码：

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

- Tejs

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");

- jfriend00

Answer 6

使用:not()比.not()更快。 另外，不要添加和删除类，而是使用jQuery的toggleClass()。 你应该像这样编写代码：

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

- Mohsen

---

这样做不起作用。如果您有选择器而不是DOM元素，则“：not”只会更快。无论如何，您无法以这种方式连接jQuery对象。 - Felix Kling

如果这个功能能够正常工作，它会将每个非活动选项卡切换为活动状态，这不是想要的结果。 - jfriend00