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 を与えて、1 つのボタンが次のボタンの上にわずかに重なるようにしています。私がしたいのは、jQueryを使用して、「999」などのクリックされたボタンにはるかに高いzインデックスを追加して、他の2つのボタンの上に表示されるようにするクラスを追加することです。現在クリックされているボタンにアクティブなクラスを追加し、現在<li>設定されているボタンからアクティブなクラスを削除する方法がわかりません。<li>新しいボタンが押される前に、他の2つのどちらにアクティブなクラスが設定されているかをjQueryに判断させる方法がわかりません。どうすればそれを行うことができますか？

また、クラスを追加することで問題が解決するかどうかもわかりません。これは、<li>の id をターゲットにして z-index を既に設定しているためです。おそらく、現在押されているボタンのインライン css に影響を与えて、id の css をオーバーライドし、他の 2 つのインライン css z-index が「999」に設定されているものを確認して、それらを削除できるようにする必要があるかもしれません。 css をインライン化し、他の 2 つのボタンよりも大きな 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

別の方法があります...これは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 に答える
0

あなたのすべての回答を見て、兄弟セレクターを見つけたとき、私はシンプルで私にとってうまくいく答えを見つけました. クラスを使用していない以外に何か問題がある場合は教えてください。私の状況では、うまく機能すると思います！みんなの助けに感謝します！

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

smack0007 の回答は、私が使用している回答を得るのに最も役立ったので、彼/彼女にチェックマークを付けています。

于 2009-11-02T12:50:50.710 に答える