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

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

Linda Hamilton

リリース： 2024-11-25 13:58:11

オリジナル

411 人が閲覧しました

How Can I Use jQuery to Dynamically Toggle a Single Active Class on Menu Items?

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 サイトの他の関連記事を参照してください。

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