为活动 li 元素提供不同的背景

Question

我正在努力实现这样的事情，如IP-Board网站上的图片所示。IP 映像

我的代码如下：-

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

现在，我希望当用户单击它时，li 项目背景变为白色。我知道这可以通过Jquery完成，但我不是很精通它。希望你们中的任何一个人能帮助我。

我尝试了本指南，但没有奏效 如何使用 jquery 突出显示选定的列表项？

另外请记住，两个 li 元素都包含 jquery 下拉框。

更新我想要 Jquery，以便如果我再次单击它，应该删除活动类。

Answer 1

您可以通过在

选择器之后:active来获取活动元素，如下所示：

演示

.CSS

li:active{
    background:red;
}

更新：

如果你想在后台保持红色，你需要使用JQuery。 首先创建一个你想要的类，像这样设置活动项的样式：

.active{
        background:red;
    }

然后使用此 JQuery 代码：

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

jsFiddle 在这里

Answer 2

> $('ul li').on('click', function(){

$(this).addClass('highlight');

});并在 CSS 中添加类 ".highlight"

.highlight { background-color:red; }

Answer 3

jQuery：

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

.CSS：

.highlight{
    background-color: red;
}

演示