javascript - 给一个活跃的 li 元素一个不同的背景

Question

我正在努力实现这样的事情，如从 IP-Board 网站拍摄的图像所示。 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您可以通过after 选择器获取活动元素，如下所示：

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