jQuery を使用してメニュー項目のアクティブ状態を管理するにはどうすればよいですか?-CSSチュートリアル-php.cn

jQuery を使用してメニュー項目のアクティブ状態を管理するにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-11-27 20:55:13

オリジナル

761 人が閲覧しました

How Can I Use jQuery to Manage the Active State of Menu Items?

jQuery を使用したメニュー項目の状態の変更

この投稿では、jQuery の機能を利用してクラスを動的に管理する方法について詳しく説明しますメニュー内のリスト項目のスタイル。目標は、クリック時に「現在の」クラスを特定のリスト項目に追加し、同時に他のすべての項目から削除することです。

初期セットアップ

機能を開始するには、まず

でメニュー項目を定義する必要があります。タグを使用した要素とリンク。最初に選択された項目を示すために、リスト項目リンクの 1 つに「current」クラスを追加します。

<ul>

ログイン後にコピー

イベントリスナーの追加

jQuery の使用、クリックを処理するために、各リスト項目のリンクにイベントリスナーをアタッチします。イベント:

$('#menu li a').on('click', function() {
  // Add 'current' class to this list item
  $(this).addClass('current');
  
  // Remove 'current' class from all other list items
  $('#menu li a.current').not(this).removeClass('current');
});

ログイン後にコピー

説明

イベントリスナー内で、jQuery コードスニペットは次のタスクを実行します。

' を追加します。 current' クラスを使用して、クリックされたリスト項目のリンクに追加します。 $(this).addClass('current').
$('#menu li a.current').not(this).removeClass を使用して、他のすべてのリスト項目リンクから 'current' クラスを削除します。（'現在'）。この行は、「現在の」クラスを持つすべてのリンクを選択し、現在クリックされているリンクを除外します。

Result

結果として、ユーザーがいずれかをクリックすると、メニュー項目のリンクは「現在の」クラススタイルを取得しますが、「現在の」クラスは以前にアクティブだった項目から削除されます。これにより、常に 1 つのリスト項目リンクのみが現在のスタイルを持つことが保証されます。

以上がjQuery を使用してメニュー項目のアクティブ状態を管理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。