我有一个由无序列表构建的主页中的菜单。我正在尝试使用JavaScript更改选定的选项卡颜色。如果我在锚标签中有href ="#",它可以正常工作,但是如果我在另一个页面上放置了一个实际链接,则"颜色"选项卡将恢复回到主页。选择时,我将ListItem 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 for table Tab
...stuff
#navbar ul li a#onlink
{
background: #FFF;
color: #465c71;
}
#navbar ul li a#onlink:hover
{
background: #FFF;
color: #465c71;
...more stuff
实际移至该页面时,您需要设置所选链接。尝试这样的事情。
$(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。否则,您要么需要在div
和ul
上使用'ClientIdMode =" static"',要么使用'<%= navbar.ClientID%>'
获取ID。请参阅此处的工作示例:jsfiddle
您还需要对CSS
进行稍作更改,而不是:
#navbar ul li a#onlink
请使用:
#navbar ul li a.onlink