css导航条选中项高亮效果显示的问题
想要实现导航条被选中项的状态颜色和其他选项不同的高亮区分效果，应为必须要用js来实现，关于js我不太懂，在网上找了点资料，套用一下，但是现在出现了一个问题，就是这里面链接...
想要实现导航条被选中项的状态颜色和其他选项不同的高亮区分效果，应为必须要用js来实现，关于js我不太懂，在网上找了点资料，套用一下，但是现在出现了一个问题，就是这里面链接是#时，高亮效果可以实现，但是我吧链接换成具体的网页的地址时，高亮效果就没有了，这是我想不明白的地方，希望各位了解的能帮我看一下，谢谢！下面是代码和js：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>选中当前菜单后高亮</title>
<style type="text/css">
<!--
.nav {MARGIN: 1px 0; WIDTH: 100%; FONT-FAMILY: verdana; HEIGHT: 21px; BACKGROUND-COLOR: #970B0B; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.nav UL {PADDING: 0px; DISPLAY: block; MARGIN: 0px; LIST-STYLE-TYPE: none; HEIGHT: 21px; BACKGROUND-COLOR: #970B0B;COLOR: #ffffff; }
.nav LI {BORDER-RIGHT: #ffffff 1px solid; DISPLAY: block; FLOAT: left; HEIGHT: 21px;font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.nav LI A {PADDING:1px 15px 0; DISPLAY: block; FONT-WEIGHT: none; COLOR: #ffffff; LINE-HEIGHT: 20px; TEXT-DECORATION: none;}
.nav LI A:hover {COLOR:#562505; BACKGROUND-COLOR: #f4f524; TEXT-DECORATION: none;}
.current{ color:#ffffff; background:#D42524;}
.nav li#date{ color:#ffffff; PADDING:2px 15px 0; }
-->
</style>
<script language="javascript" type="text/javascript">
var $c=function(array){var nArray = [];for (var i=0;i<array.length;i++) nArray.push(array[i]);return nArray;};
Array.prototype.each=function(func){
for(var i=0,l=this.length;i<l;i++) {func(this[i],i);};
};
document .getElementsByClassName=function(cn){
var hasClass=function(w,Name){
var hasClass = false;
w.className.split(' ').each(function(s){
if (s == Name) hasClass = true;
});
return hasClass;
};
var elems =document.getElementsByTagName("*")||document.all;
var elemList = [];
$c(elems).each(function(e){
if(hasClass(e,cn)){elemList.push(e);}
})
return $c(elemList);
};
function change_bg(obj){
var a=document.getElementsByClassName("nav")[0].getElementsByTagName("a");
for(var i=0;i<a.length;i++){a[i].className="";}
obj.className="current";
}
</script>
</head>
<body>
<DIV class="nav">
<UL>
<LI><A href="#" class="current" onclick="change_bg(this)">源码爱好者</A></LI>
<LI><A href="#" onclick="change_bg(this)">网页特效</A> </LI>
<LI><a href="#" onclick="change_bg(this)">源码下载</a> </LI>
<LI><A href="#" onclick="change_bg(this)">ASP源码</A> </LI>
<LI><A href="#" onclick="change_bg(this)">PHP源码</A> </LI>
<LI><A href="#" onclick="change_bg(this)">JSP源码</A> </LI>
<LI><A href="#" onclick="change_bg(this)">脚本资源</A> </LI>
<LI><A href="#" onclick="change_bg(this)">软件下载</A> </LI>
</UL>
</DIV>
</body>
</html>
后台已经把导航和页面内容分离出来了，也就是说所有的页面共用一个导航，试问这样还能对每个页面加类么！这只能通过js来实现那样高亮效果了啊，不这样，谁会有病没事就用js啊 展开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>选中当前菜单后高亮</title>
<style type="text/css">
<!--
.nav {MARGIN: 1px 0; WIDTH: 100%; FONT-FAMILY: verdana; HEIGHT: 21px; BACKGROUND-COLOR: #970B0B; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.nav UL {PADDING: 0px; DISPLAY: block; MARGIN: 0px; LIST-STYLE-TYPE: none; HEIGHT: 21px; BACKGROUND-COLOR: #970B0B;COLOR: #ffffff; }
.nav LI {BORDER-RIGHT: #ffffff 1px solid; DISPLAY: block; FLOAT: left; HEIGHT: 21px;font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.nav LI A {PADDING:1px 15px 0; DISPLAY: block; FONT-WEIGHT: none; COLOR: #ffffff; LINE-HEIGHT: 20px; TEXT-DECORATION: none;}
.nav LI A:hover {COLOR:#562505; BACKGROUND-COLOR: #f4f524; TEXT-DECORATION: none;}
.current{ color:#ffffff; background:#D42524;}
.nav li#date{ color:#ffffff; PADDING:2px 15px 0; }
-->
</style>
<script language="javascript" type="text/javascript">
var $c=function(array){var nArray = [];for (var i=0;i<array.length;i++) nArray.push(array[i]);return nArray;};
Array.prototype.each=function(func){
for(var i=0,l=this.length;i<l;i++) {func(this[i],i);};
};
document .getElementsByClassName=function(cn){
var hasClass=function(w,Name){
var hasClass = false;
w.className.split(' ').each(function(s){
if (s == Name) hasClass = true;
});
return hasClass;
};
var elems =document.getElementsByTagName("*")||document.all;
var elemList = [];
$c(elems).each(function(e){
if(hasClass(e,cn)){elemList.push(e);}
})
return $c(elemList);
};
function change_bg(obj){
var a=document.getElementsByClassName("nav")[0].getElementsByTagName("a");
for(var i=0;i<a.length;i++){a[i].className="";}
obj.className="current";
}
</script>
</head>
<body>
<DIV class="nav">
<UL>
<LI><A href="#" class="current" onclick="change_bg(this)">源码爱好者</A></LI>
<LI><A href="#" onclick="change_bg(this)">网页特效</A> </LI>
<LI><a href="#" onclick="change_bg(this)">源码下载</a> </LI>
<LI><A href="#" onclick="change_bg(this)">ASP源码</A> </LI>
<LI><A href="#" onclick="change_bg(this)">PHP源码</A> </LI>
<LI><A href="#" onclick="change_bg(this)">JSP源码</A> </LI>
<LI><A href="#" onclick="change_bg(this)">脚本资源</A> </LI>
<LI><A href="#" onclick="change_bg(this)">软件下载</A> </LI>
</UL>
</DIV>
</body>
</html>
后台已经把导航和页面内容分离出来了，也就是说所有的页面共用一个导航，试问这样还能对每个页面加类么！这只能通过js来实现那样高亮效果了啊，不这样，谁会有病没事就用js啊 展开
2个回答
展开全部
现在做前台的 建议去看下Jquery 一个很不错的javascript框架
像这种导航条 用jq一行代码就搞定了
像这种导航条 用jq一行代码就搞定了
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
笑话,这么简单的效果必需要用上Js?在当前页面的对应连接上加个类不就得了嘛。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
