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覆盖。

Answer 2

您是否尝试更改背景？ Like that?

我在测试中删除了锚点，因此它不会产生404错误。

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

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

    ctrl.style.background = 'white';
}

Answer 3

您尝试的内容无效，因为您的网页已刷新

因为如果您单击链接而不是浏览器将重定向该链接

所以点击页面加载后你可以查看当前页面并找到菜单中的链接并给出css

将此脚本放入您的页面

    $(document).ready(function () {
        var page = top.location.toString().split("/");
        alert(page[page.length - 1].toString());
        $('#myslidemenu li').css('color', 'blue');
        $('#myslidemenu').find('a[href="' + page[page.length - 1].toString() + '"]').closest('li').css('color', 'white');

    });

在文件就绪时它需要页面名称并找到包含href =当前页面的锚标记并更改它最接近的li颜色;

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

3 个答案: