Question

我有由ul li构建的菜单，每个菜单都有锚标签。 Css应用于锚点和锚：悬停然而我希望所选项目显示它被选中将背景改变为不同的颜色。 anchor：active不起作用。

我正在尝试javascript但尚未成功。这可以通过CSS完成吗？我看了很多例子，但没有一个真正有效。

JAVASCRIPT

 <script type="text/javascript">
      function ChangeColor(obj) {
         var li = document.getElementById(obj.id);
         li.style.background = "#bfcbd6";
      }
 </script>

HTML

 <div id="navigation">
      <ul>
          <li><a onclick="changecolor(this);" href="Default.aspx">Home</a></li>
          <li><a onclick="changecolor(this);" href="View.aspx">View</a></li>
          <li><a onclick="changecolor(this);" href="About.aspx">About</a></li>
      </ul>
  </div>

CSS - 简化

#navigation ul {
  list-style-type: none;
}

#navigation li 
{
  float: left;
}

#navigation a
{
  background-color: #465c71;
}

#navigation a:hover
{
  background-color: #bfcbd6;
}

Answer 1

您不需要再次获取id来处理元素。 obj引用了实际的元素。

 <script type="text/javascript">
      function ChangeColor(obj) {
         obj.style.backgroundColor = "#bfcbd6";
      }
 </script>

修改：和javaScript is case sensitive，因此您应该检查您的功能名称。

Here is a jsFiddle Demo

Answer 2

我找到了一种使用JavaScript来解决这种情况的方法。这适用于拥有MasterPage。然后更改所选选项卡的ID将引用该css 仅在将其他选项卡ID设置为null时选择选项卡。

HTML

<div id="navbar">
    <div id="holder">
        <ul id="menulist">
            <li><a onclick="SelectedTab(this);" href="#" id="onlink" >Home</a></li>
            <li><a onclick="SelectedTab(this);" href="#" id="" >Products</a></li>
            <li><a onclick="SelectedTab(this);" href="#" id="">Services</a></li>
            <li><a onclick="SelectedTab(this);" href="#" id="">Gallery</a></li>
            <li><a onclick="SelectedTab(this);" href="#" id="" >Contact</a></li>
        </ul>
    </div>
</div>

的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) //this condition is never true         
            {
                index = i;
                aElements[i].id="onlink"
            } else {
                aElements[i].id=""
            }   
        } 
    }

用于在选择标签后更改背景颜色的Css

#holder ul li a#onlink
{
   background: #FFF;
   color: #000;
   border-bottom: 1px solid #FFF;
}

单击时更改列表项中锚点的背景颜色

2 个答案: