信鸽网

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

  作者：bea

本文实例讲述了JS实现选中当前菜单后高亮显示的导航条效果。分享给大家供大家参考。具体如下： 这里演示选中当前菜单后，该菜单高亮显示，也就是说在不改变菜单CSS代码的情况下，用JavaScript去控制菜单的背景，如果该菜单项被点击后，将赋予它一个与众不同的背景颜色或背景图像，这样可以清淅的指引用户下在浏览的网站栏目，本菜单不需要动态语言的加入，简单方便而且效果好。 运行效果截图如下： 在线演示地址如下： http://demo./js/2015/js-cho-nav-gl-

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


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


运行效果截图如下：



在线演示地址如下：


http://demo./js/2015/js-cho-nav-gl-show-menu-demo/


具体代码如下：




<!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="#" onclick="change_bg(this)">脚本首页</A></LI>

 <LI><A href="#" onclick="change_bg(this)">网页特效</A> </LI>

 <LI><a href="#" class="current" 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>


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




有用  |  无用

猜你喜欢

您可能感兴趣的文章: