<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <mce: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;};//定义一个函数别名 //定义一个数组对象的方法each,参数是一个函数.遍历数组的每一个元素,然后通过func函数对数组的每一个元素进行一次操作.同时给func传递了两个参数this[i]和i.(但是在后面 //只用到了this[i]) Array.prototype.each=function(func){for(var i=0,l=this.length;i<l;i++) {func(this[i],i);};}; //定义一个方法getElementsByClassName(此处的classname是表示html的标签的class属性值),参数是一个string.返回一个数组. document.getElementsByClassName=function(cn){// //定义一个函数hasclass,用于寻找是否存在一个标签引用了.cn这个css的样式类 //参数w是一个标签,name是一个css样式类的类名.函数返回boolean. var hasClass=function(w,Name){ var hasClass = false; //split方法返回的是一个数组,所以可以用each方法 //s实际上是className.split(' ')返回的数组中的一个元素,既是一个css样式类名 w.className.split(' ').each(function(s){ if (s == Name) hasClass = true; }); return hasClass; }; //获得html文件中所有的标签 var elems =document.getElementsByTagName("*")||document.all; //定义一个数组 var elemList = []; //在所有标签中寻找名字为cn(只是参数名,cn的内容在具体使用时会被指定,上同)的css样式类 $c(elems).each(function(e){ if(hasClass(e,cn)){elemList.push(e);} }) return $c(elemList); }; window.onload=function(){ //获取css样式为.nav的标签中的a标签 var a=document.getElementsByClassName("nav")[0].getElementsByTagName("a"); for(var i=0;i<a.length;i++){ //相当于<a onfocus="function(){this.blur();}"></a> a[i].onfocus=function(){this.blur();} a[i].onclick=function(){for(var j=0;j<a.length;j++){a[j].className="";};this.className="current";} } } // --></mce:script> <title>菜单测试页面</title> <mce:style type="text/css"><!-- .nav{ MARGIN: 1px 0; width:auto; 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:#FF6600; TEXT-DECORATION: none; } .current{ color:#ffffff; background:#FF9900; } .nav li#date{ color:#ffffff; PADDING:2px 15px 0; } --></mce:style><style type="text/css" mce_bogus="1">.nav{ MARGIN: 1px 0; width:auto; 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:#FF6600; TEXT-DECORATION: none; } .current{ color:#ffffff; background:#FF9900; } .nav li#date{ color:#ffffff; PADDING:2px 15px 0; }</style> </head> <body> <div class="nav"> <ul> <li><a href="#" mce_href="#" class="current">首页</a></li> <li><a href="#" mce_href="#">博客</a> </li> <li><a href="#" mce_href="#">照片</a> </li> <li><a href="#" mce_href="#">视频</a> </li> <li><a href="#" mce_href="#">日志</a> </li> <li><a href="#" mce_href="#">分享</a> </li> <li><a href="#" mce_href="#">关于</a> </li> </ul> </div> </body> </html>
看了一天的w3school的教程，从网上找了个实例看了下，结果看了半天。。。
凑合着看懂了，把注释加上，留个备份
