javascript - 无法在javascript中设置元素的CSS样式

Question

你好，我有一个包含一些列表元素的无序列表，我想设置一个 css 样式来突出显示已选择的列表元素我正在尝试这个，但它对样式没有影响

function SelectThis(ctrl) {
    var list = document.getElementById("myslidemenu").getElementsByTagName('li');

    for (i = 0; i < list.length; i++) {
        list[i].style.color = "blue";
    }

    ctrl.style.color = 'white';
}

我的 html 看起来像这样

<div id="myslidemenu" class="jqueryslidemenu">
    <ul>
        <li onclick="SelectThis(this);"><a href="Dashboard.aspx">Dashboard</a>
        </li>
        <li onclick="SelectThis(this);"><a href="Geofence.aspx">Geofence</a>
        </li>
        <li onclick="SelectThis(this);"><a href="Personnel.aspx">Personnel</a>
        </li>
    </ul>
    <br style="clear: left" />
</div>

这个 div 标签在另一个 div 标签内，我不能以某种方式覆盖内部 div 标签以导致更改 Ul 中选定的 li

我的css是这样的

.jqueryslidemenu ul li a:hover{
 background: black; /*tab link background during hover state*/
  color: Yellow;
  }

.jqueryslidemenu{
font: bold 12px Arial;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
height: 1%;
}

Answer 1

您应该更改 <a> 的样式元素而不是 <li> . <li>的风格已更新但<a>有自己的风格，应该用 JS 覆盖。