jQuery の `addClass()` と `removeClass()` を使用して、一度に 1 つのリスト項目だけを強調表示する方法は?

jQuery を使用したクリック時のクラスの追加と削除

リスト メニュー項目を操作する場合、多くの場合、現在アクティブな項目を次の方法で強調表示することが望ましいです。クラスを追加します。ただし、一度に 1 つのアイテムのみがクラスを持つようにする際に問題が発生する可能性があります。

これに対処するには、jQuery の addClass() メソッドと RemoveClass() メソッドを使用します。まず、「about-link」などの目的の開始要素にクラスを追加します。次に、リスト項目 ('menu li') のイベント リスナーを使用して、クリックを処理します。

イベント リスナー内で、兄弟() メソッドを利用して、他のすべてのリスト項目要素からクラスを削除します。これにより、クリックされた要素のみがクラスを保持するようになります。ただし、'about-link' をアクティブにして開始するには、次のコード行を追加する必要があります。

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

この変更されたコードでは、リスト項目内の 'a' 要素を選択します (' menu li a') リンクをターゲットにしていることを確認します。次に、現在のクラスをセレクターとして使用して、クリックされたリンクに追加する前に、以前にアクティブだったリンクからそのクラスを削除します。これにより、最初の JavaScript でクラスを「about-link」に手動で追加する必要がなくなります。

以上がjQuery の `addClass()` と `removeClass()` を使用して、一度に 1 つのリスト項目だけを強調表示する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。