jQuery を使用してアクティブなメニュー項目を管理するために、クリック時に CSS クラスを切り替えるにはどうすればよいですか?-CSSチュートリアル-php.cn

jQuery を使用してアクティブなメニュー項目を管理するために、クリック時に CSS クラスを切り替えるにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-11-25 05:43:17

オリジナル

332 人が閲覧しました

How Can I Toggle CSS Classes on Click Using jQuery to Manage Active Menu Items?

jQuery を使用したクリック時の CSS クラスの切り替え

jQuery を使用してクリックイベント時に CSS クラスを動的に追加および削除するには、次のことを検討してみましょう

問題: メニューは次のように構成されています特定のクラスをアクティブにする必要があるリスト項目の数。項目をクリックすると、クラスはその項目にのみ追加され、他のすべての項目からは削除されます。最初、「about-link」にはデフォルトで「current」クラスが含まれている必要があります。

解決策:

この問題を解決するには、次の jQuery を利用できます。コード:

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

ログイン後にコピー

このコード内:

$('#menu li a') すべてのを選択します。

内の要素ID が「menu」の要素の子孫である要素。

.on('click', function()) は、これらの要素のクリックイベントリスナーを登録します。

イベントハンドラーの内部, .removeClass('current') は現在アクティブな要素から「current」クラスを削除します。

.addClass('current') は「current」クラスを追加します

このアプローチに従うと、「about-link」には最初に $('#about-link').addClass(' を使用して「現在の」クラスが割り当てられます。現在'）;。メニュー内の他の項目をクリックすると、「現在の」クラスが以前にアクティブだった項目から削除され、クリックされた項目に追加され、常に 1 つの項目だけがアクティブのままになります。

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