javascript - 给活跃的 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