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

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 コード スニペットは次のタスクを実行します。

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

Result

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

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