0

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

我正在尝试 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;
}
4

2 回答 2

2

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

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

编辑：而且javaScript is case sensitive，所以你应该检查你的函数名称。

这是一个 jsFiddle 演示

于 2012-10-17T18:22:31.927 回答
0

我找到了一种使用 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;
}
于 2012-10-18T18:45:52.473 回答