jQuery を使用してクリック時に CSS クラスを追加および削除する方法-CSSチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-11-26 03:47:11

オリジナル

357 人が閲覧しました

How to Use jQuery to Add and Remove CSS Classes on Click?

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');
});

ログイン後にコピー

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