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

Question

我有一个无序列表.

<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添加一个类,它可以为点击的任何按钮添加更高的z-index,例如'999',以确保它将位于其他两个按钮之上.我无法弄清楚如何将活动类添加到当前单击的<li>同时从当前设置的任何按钮中删除活动类.我不知道如何让jQuery弄清楚<li>在按下新按钮之前,其他两个中的哪一个设置了活动类.我该怎么做呢？

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

Answer 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);
});