javascript - アクティブな li 要素に異なる背景を与える

Question

IP-Board の Web サイトから取得した画像に示されているように、このようなことを達成しようとしています。 IP画像

私のコードは次のようなものです:-

<ul class="navmenu">
 <li>//1st drop down box</li>
 <li>// 2nd drop down box</li>

ここで、ユーザーがクリックしたときに li アイテムの背景を白に変更したいと考えています。これはJqueryを介して実行できることは知っていますが、あまり詳しくありません。あなたの誰かが私を助けてくれることを願っています。

このガイドを試しましたが、うまくいきませんでした

また、両方の li 要素に jquery ドロップダウンボックスが含まれていることに注意してください。

更新 Jqueryが必要なので、もう一度クリックするとアクティブなクラスが削除されます。

score 2 · Accepted Answer

:active次のようにセレクターの後にアクティブな要素を取得できます。

CSS

li:active{
    background:red;
}

アップデート：

バックグラウンドで赤色のままにしたい場合は、JQuery を使用する必要があります。最初に、次のようにアクティブなアイテムのスタイルを設定するクラスを作成します。

.active{
        background:red;
    }

次に、この JQuery コードを使用します。

$("li").click(function(){
    $("li.active").removeClass("active");
    $(this).addClass("active");
});

score 1 · Accepted Answer

$('ul li').on('click', function(){
$(this).addClass('highlight');
});

そしてcssにクラス「.highlight」を追加します

.highlight { background-color:red; }

score 0 · Accepted Answer

jQuery:

$('ul li').on('click', function(){
  $(this).toggleClass('highlight');
});

CSS:

.highlight{
    background-color: red;
}