jQuery を使用してメニュー項目の単一のアクティブ クラスを動的に切り替えるにはどうすればよいですか?

jQuery を使用してメニュー項目のクラスを動的に切り替える

この投稿では、次の場合にクラスを動的に追加および削除しようとするシナリオに遭遇します。特定のメニュー項目をクリックします。目的は、典型的なメニュー ナビゲーション動作を模倣して、一度に 1 つのアクティブ クラスを維持することです。

これを達成するには、最初に 'current' クラスを 'about-link' に追加して、初期アクティブ クラスを指定します。州。次に、イベント リスナーを

にアタッチします。メニュー内の要素。任意の

をクリックすると、「現在の」クラスが取得されますが、その兄弟のクラスは削除され、排他性が確保されます。

ただし、最初からアクティブな状態を適切に反映するために、アプローチを改良することができます。 「current」クラスを「about-link」に直接追加する代わりに、変更されたイベント ハンドラーを利用して、まず「current」クラスを現在所有しているメニュー内の既存の「a」要素から削除します。次に、クリックされた 要素に「現在の」クラスを追加します。この調整により、「about-link」が「current」クラスなしで開始され、メニューの操作全体を通じて必要な単一のアクティブ状態が維持されることが保証されます。

この改良により強化された jQuery コードは次のとおりです。

$('#menu li a').on('click', function(){
    $('#menu li a.current').removeClass('current');
    $(this).addClass('current');
});

このアプローチにより、メニューはデフォルト状態の「about-link」で開始され、他のメニュー項目がクリックされたときにアクティブなクラスが動的に切り替わります。

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