0

嗨，我有一个包含一些列表元素的无序列表，我想设置一个 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%;
}
4

3 回答 3

2

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

于 2013-06-25T07:02:55.423 回答
0

您是否尝试更改背景？像那样？

我在测试中删除了锚点，因此它不会产生 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';
}
于 2013-06-25T07:04:27.733 回答
0

您正在尝试的内容不起作用，因为您的页面正在刷新

例如，如果您单击链接，浏览器将重定向您该链接

所以点击页面加载后，您可以检查当前页面并在您的菜单中找到链接并为其提供 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 颜色；

于 2013-06-25T07:58:28.907 回答