如何使用 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 添加一个类，为单击的任何按钮（例如“999”）添加更高的 z-index，以确保它将位于其他两个按钮之上。我不知道如何将活动类添加到当前单击的

，同时从当前设置的任何按钮中删除活动类。我不知道如何让 jQuery 找出其他两个

中的哪一个在按下新按钮之前设置了活动类。我该怎么做呢？

另外，我不确定添加类是否可以解决问题，因为我已经通过针对

的 id 设置了 z-index。也许我需要影响当前按下按钮的内联 css，以便它覆盖 id 的 css，并检查其他两个中哪一个的内联 css z-index 设置为“999”，以便它可以删除它们内联 css 并具有比其他两个按钮更大的 z-index 并显示在顶部？

Answer 1

让科比的回答更进一步。如果可能的话，我会给 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);
});

Answer 2

最佳实践是使用类，但您也可以修改样式属性，例如

$('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);
});

Answer 3

如果我理解正确，应该是

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

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

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

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

Answer 4

通过查看所有答案并找到兄弟姐妹选择器，我找到了一个简单且适合我的答案。除了我没有使用类之外，请告诉我是否还有其他问题。我认为对于我的情况来说，效果很好！感谢大家的帮助！

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

由于 smack0007 的答案对我获得我正在使用的答案帮助最大，因此我给他/她打勾。

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