0

我在由无序列表构成的 MasterPage 中有一个菜单。我正在尝试使用 javascript 来更改选定的选项卡颜色。如果我在锚标签中有 href="#" 它工作正常，但如果我将实际链接放置到另一个页面，那么颜色选项卡会恢复到主页。选中后，我将列表项 ID 更改为 onlink。我一直在寻找死胡同的答案几天。有没有一个干净的解决方案？

stackoverflow 如何在他们的菜单中实现这一点？[问题] [标签] [用户] [徽章] [未答复]

菜单的 HTML

  <div id="navbar">
        <ul id="menulist">
            <li><a onclick="SelectedTab(this);" href="Default.aspx" id="onlink">Home</a></li>
            <li><a href="#" id="">View</a></li>
            <li><a onclick="SelectedTab(this);" href="About.aspx" id="">About</a></li>
            <li><a onclick="SelectedTab(this);" href="Contact" id="">Contact</a></li>
        </ul>
  </div>

Javascript

  <script type="text/javascript">
    function SelectedTab(sender) {
        var aElements = sender.parentNode.parentNode.getElementsByTagName("a");
        var aElementsLength = aElements.length;
        var index;
        for (var i = 0; i < aElementsLength; i++) {
            if (aElements[i] == sender)        
            {
                index = i;
                aElements[i].id = "onlink";
            } else {
                aElements[i].id = "";
            }
        }
    }
</script>

选定选项卡的 CSS

...stuff

#navbar ul li a#onlink
{
   background: #FFF;
   color: #465c71;
}
#navbar ul li a#onlink:hover 
{
   background: #FFF;
   color: #465c71;

...more stuff
4

1 回答 1

3

当您实际移动到该页面时，您需要设置选定的链接。尝试这样的事情。

$(function(){
    var url=document.location.href;
    $("div#navbar ul#menulist li a").each(function(){
            var t=$(this).attr("href");
            if(t && url.indexOf(t)>0){
                $(this).addClass("onlink");
            }
    });
});

请检查navbar和menulist是否是渲染元素的 ID。否则，您要么需要使用 'ClientIdMode="Static"' div，ul要么使用'<%= navbar.ClientID%>'来获取 id。在此处查看工作示例：jsfiddle

您还需要对您的CSS, 而不是：

 #navbar ul li a#onlink

请用：

 #navbar ul li a.onlink
于 2012-10-19T17:33:55.753 回答