赋予活跃的li元素不同的背景

Question

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

我的代码如下： -

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

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

我尝试过本指南，但无效How can I highlight a selected list item with jquery?

另请注意，两个li元素都包含jquery下拉框。

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

Answer 1

你可以在:active选择器之后获得活动元素：

DEMO

<强> CSS

li:active{
    background:red;
}

更新

如果你想让背景保持红色，你需要使用JQuery。首先创建一个你希望样式为活动项的类：

.active{
        background:red;
    }

然后使用这个JQuery代码：

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

jsFiddle is here

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

DEMO