Question

我很难解决这个问题，我想在点击li时更改ul项目的背景颜色。所以，我打开一个下拉菜单，点击li链接，现在我想要mainmenuslot改变它的backgroundcolor。

我正在使用此代码：

#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。

＆＃13;

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

＆＃13;

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

＆＃13;

使用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>

Answer 2

您不能通过css选择子元素的父元素（在您的情况下，其中包含li的ul）。

最简单的方法是通过javascript更改ul的背景。

改变ul li的背景颜色

2 个答案: