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

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

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

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

5 个答案: