0

森の前に立っています。木を見つけるのを手伝ってくれませんか？

現在、PHPでリストを生成しています

echo '<div>';
echo '  <ul>';
foreach ( $myArray as $key => $value):
    echo '<li>'. $value . '</li>';
endforeach;
echo '  </ul>';
echo '</div>';

配列には限られた数のアイテムが含まれており、これは異なる場合があります。

私がやりたいことは、現在のアイテムを強調表示し、他のすべてのアイテムを通常どおり表示することです。そのため、ページを表示するときに、最初の項目が強調表示されている必要があります。2番目の項目をクリックすると、

  • 最初のアイテムがはみ出してはいけません (スタイリングはありません)。
  • 別の項目がクリックされるまで、2 番目の項目が強調表示されます。
  • 他のすべてのアイテムは、通常のスタイリングとして表示する必要があります。

これを CSS だけで実現したいと考えています。

名前を付けると、リスト項目をクリックすると、jQuery を使用する予定の他の div 要素を表示/非表示にする予定です。

4

4 に答える 4

2 
$('li').on('click', function() {
  $('li.highlight').removClass('highlight');  // first un-highlight all lis
  $(this).addClass('highlight');  // then highlight only clicked li
});

最初のアイテムをhighlightページの読み込み時として設定するには、PHP/jQueryでも設定できます。

jQueryで実行したい場合は、次を試してください。

$(document).ready(function() {
    $('div > ul > li:first').addClass('highlight'); // set first item 
                                                // highlight at page load
    $('li').on('click', function() {
      $('li.highlight').removClass('highlight');  // first un-highlight all lis
      $(this).addClass('highlight');  // then highlight only clicked li
    });
});
于 2013-02-18T17:53:34.290 に答える
1

li便利なセレクターを提供するために、おそらくクラス名を に追加する必要があります。以下の私の例ではsome_class、この目的のために使用しています。また、選択したアイテムを示すクラスを使用することも想定しています。この例では、selectedこれのクラス名として使用しています。

$('li.some_class').click(function() {
    $('li.some_class').removeClass('selected');
    $(this).addClass('selected');
});
于 2013-02-18T17:56:12.580 に答える
1

Try .addClass() .removeClass() and .eq():

$(function(){
   $('div ul li').eq(1).addClass('active');
   $('div ul li').click(function(){
      $(this).siblings().removeClass('active');
      $(this).addClass('active');
   });
});

As .eq() is 0 indexed so .eq(1) will select the second li on page load.

于 2013-02-18T17:54:59.480 に答える
0

迅速な返信に感謝します。

私は最終的にあなたの答えを混ぜ合わせて、それが私のために働くようにします

$(document).ready(function() 
{
    $('div#myclass > ul.myid > li:first').addClass('current'); // set first item 

    $('div#myclass > ul.myid > li').click(function()
    {
        $(this).siblings().removeClass('current');
        $(this).addClass('current');
    });
});

他のリスト項目を区別するために追加した myclass と myid。

@thecodeparadox: あなたの提案では、別のアイテムをクリックしたときの更新が行われませんでした。@jai: あなたの提案では最初のセットは完了していません。

しかし、最終的なミックスでは、必要に応じて 100% 機能します。

どうもありがとうございました。

ヴォルフガング

于 2013-02-18T18:33:04.793 に答える