css - 更改 ul li 的背景颜色

Question

我一直在努力解决这个问题，我想在单击 li 时更改我的 ul 元素的背景颜色。 因此，我打开一个下拉菜单，单击 li 链接，现在我希望 mainmenuslot 更改其背景颜色。

我正在使用这段代码:

#mainnav-menu ul li.current_page_item a, #mainnav-menu ul li.current-menu-item a {
    background-color: #004494;
    background: #004494;
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
}

要获得此功能，我必须添加什么？我用#mainnav-menu ul a、#mainnav-menu ul 和许多其他可能性进行了尝试。

Answer 1

除了@jacobdo 所说的之外，您只能访问 li 焦点并更改 li 背景、颜色(如下所述)等，但您无法更改 ul 背景、颜色没有javascript。

li:focus  {
  outline: 0;
   background-color: #004494;
    background: #004494;
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
}

<div id="menus">
    <ul>
        <li tabindex="0"><a href="#">Home</a></li>
        <li tabindex="0"><a href="#">Other</a></li>
        <li tabindex="0"><a href="#">My Page</a></li>
        <li tabindex="0"><a href="#">Other Page</a></li>
        <li tabindex="0" style="border-right:none;"><a href="#">Logout</a></li>
    </ul>
</div>

使用 jQuery:

http://jsfiddle.net/8zzc3oow/

仅使用 javascipt:

http://jsfiddle.net/2jpehad9/

当然，当用户点击 li 链接时，必须实现 jQuery 和 javascript 更改颜色事件。

jQuery 点击 - https://api.jquery.com/click

jQuery 点击示例

<div id="target">
  Click here
</div>
$( "#target" ).click(function() {
  alert( "Handler for .click() called." );
});

js点击示例

<input type="checkbox" id="myCheck" onmouseover="myFunction()" onclick="alert('clicked')">

<script>
// On mouse-over, execute myFunction
function myFunction() {
    document.getElementById("myCheck").click(); // Click on the checkbox
}
</script>