单击时更改listitem中锚点的背景颜色

我有一个菜单，每个菜单中都带有锚标记，由ul li构建。 Css应用于锚点和锚点：悬停但是，我希望选定的项目显示它已被选中，并将背景变为另一种颜色。主播：主动不起作用。单击时更改listitem中锚点的背景颜色

我想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; 
}

来源

2012-10-17 TroyS

你不需要处理元素再次获得ID。 obj引用实际元素。

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

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

Here is a jsFiddle Demo

来源

2012-10-17 18:22:31 ocanal

@acanal事实上，做做现在的工作，谢谢，但之后改变背景颜色正在恢复为CSS＃导航a中设置的主要颜色。你知道为什么吗？ – TroyS

如果您的页面在您点击链接时发生变化，那么您的页面将全部变回默认状态。这很正常。你不能用javascript做到这一点。你应该在服务器端做到这一点。例如主页按钮应设置为Default.aspx上的活动按钮。 – ocanal

@acanal好的，这是我会做的感谢。 – TroyS

我已经找到一种方法，使用JavaScript来解决这种情况。这适用于拥有MasterPage。只有在将其他选项卡ID设置为空的情况下，更改选定选项卡的ID才会引用该选项卡的css。

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-18 18:45:52 TroyS

单击时更改listitem中锚点的背景颜色

回答

相关问题