JS实现选中当前菜单后高亮显示的导航条效果

更新时间：2026-03-29 01:04:14作者：yezheng

本文实例讲述了JS实现选中当前菜单后高亮显示的导航条效果。分享给大家供大家参考。具体如下：

这里演示选中当前菜单后，该菜单高亮显示，也就是说在不改变菜单CSS代码的情况下，用JavaScript去控制菜单的背景，如果该菜单项被点击后，将赋予它一个与众不同的背景颜色或背景图像，这样可以清淅的指引用户下在浏览的网站栏目，本菜单不需要动态语言的加入，简单方便而且效果好。

运行效果截图如下：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>选中当前菜单后高亮</title>

<!--

.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>

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>

<UL>

<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>

</UL>

</DIV>

</body>

</html>

希望本文所述对大家的JavaScript程序设计有所帮助。