如何添加和移除活动类使用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索引使得一个按钮略微是在下一顶部。我想要做的就是使用jQuery添加一个类，添加是一个更高的z-index到任何按钮被按下，如“999”，以确保这将是对其他两个按钮的上方。我无法弄清楚如何积极类添加到当前点击<li>而除去目前已经将其设置任何按钮活动类。我不知道该怎么做的jQuery找出其中的另外两个<li>的具有活性类新的按钮被按下之前设置。我会如何做呢？

另外，我不知道，如果添加类将解决这个问题，因为我已经瞄准<li>的id设置的z-index。也许我需要影响到当前推按钮内嵌CSS所以它覆盖ID的CSS，也有它检查，看看哪些其他两个具有内嵌CSS的z-index设置为“999”，因此它可以删除其内联的CSS和具有较大的z-index比其他两个按钮，并出现在顶部？

Answer 1

要采取了Kobi的回答得远一点。我会给李（多个）如果可能的一些常见类或一个id在UL上。

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索引和替换它，当不活动按钮。

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