如何使用 jQuery 添加和删除活动类？答案

【问题标题】：How do i add and remove an active class with jQuery?如何使用 jQuery 添加和删除活动类？
【发布时间】：2009-11-02 11:46:47
【问题描述】：

我有一个无序列表。

<style>
  #button1 { position:relative; z-index: 3; }
  #button2 { position:relative; z-index: 2; }
  #button3 { position:relative; z-index: 1; }
</style>

<ul>
  <li id="button1">Button 1</li>
  <li id="button2">Button 2</li>
  <li id="button3">Button 3</li>
</ul>

我目前正在使用 css 为每个 id 赋予不同的 z-index，以便一个按钮略高于下一个按钮。我想要做的是使用 jQuery 添加一个类，该类向单击的任何按钮（例如“999”）添加更高的 z-index，以确保它将位于其他两个按钮的顶部。我无法弄清楚如何将活动类添加到当前单击的<li>，同时从当前设置的任何按钮中删除活动类。我不知道如何让 jQuery 在按下新按钮之前找出另外两个 <li> 中的哪一个具有活动类集。我该怎么做呢？

我也不确定添加一个类是否能解决问题，因为我已经通过定位<li> 的 id 来设置 z-index。也许我需要影响当前按下的按钮的内联 css，以便它覆盖 id 的 css，并让它检查其他两个中的哪一个将内联 css z-index 设置为“999”，这样它就可以删除它们的内联 css 并且具有比其他两个按钮更大的 z-index 并显示在顶部？

【问题讨论】：

标签： jquery css class inline z-index

【解决方案1】：

进一步了解 Kobi 的答案。如果可能的话，我会给 li(s) 一些常见的类或 ul 上的 id。

var $li = $('li.clickMe'); // or var $li = $('#id li');

$li.click(function(){
    $li.removeClass('active');
    $(this).addClass('active');
});

如果您根据 ID 设置 z-index，则 ID 的 css 规则可能优先于任何基于类的规则。您也可以将 z-index 属性内联并使用 jQuery 进行更改。

var $li = $('li.clickMe'); // or var $li = $('#id li');

$li.click(function(){
    $li.css('z-index', 1); // Sets all li(s) to z-index of 1.
    $(this).css('z-index', 999);
});

【讨论】：

您的解决方案更接近，但是当它将 li 的 z-index 之一更改为 999 时，它将 1 的内联 css z-index 添加到其他两个，而我只是希望它删除其他两个的内联 css，使其恢复为原始 z-index 值。
我认为这行：$(this).css('z-index', 999);可以改为：$(this).css('z-index', '');那应该删除它。如果您真的希望它恢复，尽管您应该使用类。

【解决方案2】：

最好的做法是使用class，但是你也可以修改style属性，比如

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

  var li = $(this);

  // check the highest z-index
  var maxIndex = 4;

  $('li').each(function(){
    var zindex = $(this).css("z-index");
    if ( parseInt(zindex) > maxIndex)
    {
      maxIndex = parseInt(zindex);
    }
  });

  // increment by 1
  maxIndex++;

  li.css('z-index', maxIndex);
});

【讨论】：

你不能把maxIndex保存为一个全局变量吗？你真的必须每次循环才能得到它吗？无论如何，你会得到 +1，因为我在看到你的答案之前已经编辑了我的答案。
所以你只是让最近点击的 li 的 z-index 比之前点击的 li 的 z-index 高一个？这是一个有趣的解决方案。谢谢！真的需要这么深入吗？
@kobi：我们可以这样说，但这是最安全的方式。如果我们有太多的 li 元素，那么我们不应该循环，让它成为全局变量。

【解决方案3】：

如果我理解正确，应该是

$('li').click(function(){
    $('.active').removeClass('active');
    $(this).addClass('active')
});

编辑 - 您遇到的是 CSS 问题 - #id 规则优先于 .class 规则。

要回答您的问题，您可以使用以下方法设置 z-index：

$(this).css('z-index', 999);

【讨论】：

关闭，但这不起作用，因为我已经在每个按钮上都有 id 并且 id 由于某种原因覆盖了类，所以当活动类设置时，它仍然不会改变z-index
有什么办法可以在当前单击的按钮上设置内联 CSS，同时从其他两个按钮中删除内联 CSS？
尝试在你的 css 中更具体。例如，li.active 或 ul li.active，以便您比 id 的样式更具体。此外，仅分配 z-index: 999 也不是一个好习惯。这只会邀请其他人分配 z-index: 9999;别的地方。没有理由您不能查看您的代码并查看所有 z-index 分配，然后再高一点，或者如果您以后想“偷偷摸摸”做一些其他事情，或者至少增加 5 个或其他东西.

【解决方案4】：

通过查看您的所有答案并找到兄弟姐妹选择器，我找到了一个简单且适合我的答案。请告诉我除了我没有使用课程之外是否有任何问题。我认为就我的情况而言，效果很好！感谢大家的帮助！

$('li').click(function(){
      $(this).css({'z-index' : '999'})
      .siblings().css({'z-index' : ''});
});

由于 smack0007 的回答最能帮助我得到我正在使用的答案，我给他/她打勾。

【讨论】：

他。我认为我的方式实际上会快一点，因为我的方式是发烧 DOM 查找。我没有统计数据来支持这一点，如果速度很好，谁在乎呢。

【解决方案5】：

这是另一种方法...它存储 z-index 并在不是活动按钮时替换它。

$(document).ready(function(){
 var indx = $('li[id*="button"]').length;
 $('#button1').addClass('active');
 $('li[id*="button"]').each(function(){
  $(this).css('z-index',indx).data('zindx', indx);
  $(this).click(function(){
   var active = $('.active');
   active.css('z-index', active.data('zindx')).removeClass('active');
   $(this).addClass('active').css('z-index',999);
  })
  indx--;
 })
})

【讨论】：