jQuery を使用してクリック時に CSS クラスを追加および削除する方法

jQuery を使用してクリック時にクラスを追加および削除する方法?

jQuery では、addClass( )、removeClass()、および toggleClass() メソッド。これは、アクティブな状態の追加や削除、メニュー項目の強調表示など、動的な動作の実装に役立ちます。

例: クリック時のクラスの追加と削除

の付いたメニューがある要素。クリックされた要素に「現在の」クラスを追加し、他のすべての要素からは削除したいと考えています。これにより、一度に 1 つの要素だけが「現在の」クラスを持つことが保証されます。

これが jQuery ソリューションです。

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

このコードは、イベント委任を使用して、すべての要素にクリック ハンドラーをアタッチします。ライト> ID「menu」を持つコンテナ内の要素。要素がクリックされると、要素自体に「現在の」クラスが追加され、sisters() メソッドを使用してすべての兄弟から同じクラスが削除されます。

追加の考慮事項: 「現在の」クラスの初期化

最初に、メニュー項目の 1 つに「現在の」クラスを設定します。これを行うには、次のコマンドを使用します。

$('#about-link').addClass('current');

これにより、ID「about-link」を持つ要素に「current」クラスが追加され、アクティブな項目として開始されることが保証されます。

改善されたソリューション

これは、 code:

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

これは前のコードと同様に機能しますが、 をターゲットとしています。

内の要素アイテム。デフォルトでは、

要素には href 属性がないため、クリック イベントは要素に対して直接トリガーされません。

以上がjQuery を使用してクリック時に CSS クラスを追加および削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。