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

【问题标题】：Change background color on anchor in listitem when clicked单击时更改列表项中锚点的背景颜色
【发布时间】：2012-10-17 18:20:45
【问题描述】：

我有由 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;
}

【问题讨论】：

标签： javascript asp.net web-applications

【解决方案1】：

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

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

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

Here is a jsFiddle Demo

【讨论】：

@acanal 确实，现在确实有效，谢谢，但它正在恢复到 CSS #navigation a 中设置的主要颜色。你知道为什么吗？
如果您的页面在您点击链接时发生变化，那么您的页面将全部变回默认值。这很正常。你不能用javascript做到这一点。你应该在服务器端做。例如主页按钮应设置为 Default.aspx 上的活动按钮。
查看我的 javascript 解决方案答案

【解决方案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;
}

【讨论】：