1

我有一个无序列表。

<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 并出现在顶部？

4

5 回答 5

5

让科比的回答更进一步。如果可能的话，我会给 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);
});
于 2009-11-02T11:59:16.253 回答
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);
});
于 2009-11-02T12:03:14.297 回答
1

如果我理解正确，应该是

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

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

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

$(this).css('z-index', 999);
于 2009-11-02T11:50:17.573 回答
0

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

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

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

于 2009-11-02T12:50:50.710 回答
0

这是另一种方法......它存储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--;
 })
})
于 2009-11-02T13:16:53.630 回答