0

メニューバーを定義する次の html のセットがあります。

<ul id="menu-bar">
    <li class="active"><a href="/" id="home">Home</a></li>
    <li><a href="/Club/" id="club">Club Quarter</a></li>
    <li><a href="/Match/" id="match">Match Quarter</a></li>
    <li><a href="/History/" id="history">History Quarter</a></li>
</ul>

メニュー バーの背景は赤で、アクティブな項目の背景は青に設定されています。

現在選択されているアイテムのアクティブなクラスを削除し、クリックしたばかりの新しいアイテムに配置する次のjQueryがあります。

$('#menu-bar > li').click(function () {
    $('li.active').removeClass('active');
    $(this).addClass('active');
});

新しいアイテムをシングルクリックすると、ほとんどの場合、現在のアイテムの背景が赤に変わり、選択したアイテムの背景が青に変わります。その後、すぐに元の状態に戻ります。また、ページが正しく変更されるため、クリックが認識されても何も起こらない場合もあります。

新しいアイテムをダブルクリックすると。変更は期待どおりに行われますが、HTML を確認すると、多くの場合、背景が赤になり、クリックされた項目が青になっているにもかかわらず、デフォルトの最初の項目に「class=active」が付けられたままになっています。

  • 1 回のクリックで必要な効果が得られるべきですか、それとも何か不足していますか?
  • ダブルクリックすると、アクティブなクラスとして設定されているにもかかわらず、デフォルトのアイテムが赤くなるのはなぜですか?
4

1 に答える 1

0

リスト要素をクリックしているときは、実際にはアンカーをクリックしているため、別のページにリダイレクトされ、そこですべての JavaScript がリセットされ、最初からやり直すことになります。

クラスを動的に設定し、リダイレクトしてから、クラスが引き続き要素に追加されることを期待することはできません。リダイレクトするとすべてが失われます。各ページでアクティブなメニュー項目をハードコーディングするか、Cookie、localStorage、またはサーバーなどの永続的なストレージを使用して、リロード時にページの状態を維持する必要があります。

于 2013-06-05T10:06:40.630 に答える