HTML 已浏览的导航样式改变
效果：点击后 显示已浏览样式
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #list li{ list-style-type:none; width: 80px; height: 30px; line-height: 30px; background-color: beige; text-align:center; float:left; margin-left:5px; } #list li.current{ background-color:burlywood; } #list li a{ text-decoration:none; } </style> <script src="01.js"></script> <script> window.onload=function(){ var ul=getele("list"); var aarr=ul.getElementsByTagName("a"); for( var i=0;i<aarr.length;i++){ aarr[i].onclick=function(){ this.parentNode.className="current"; var otherarr=getallsiblings(this.parentNode); for(var j=0;j<otherarr.length;j++){ otherarr[j].className=""; } } } } </script> </head> <body> <div id="menu"> <ul id="list"> <li class="current"><a href="#">首页</a></li> <li><a href="javascript:void(0)">播客</a></li> <li><a href="javascript:void(0)">博客</a></li> <li><a href="javascript:void(0)">相册</a></li> <li><a href="javascript:void(0)">关于</a></li> <li><a href="javascript:void(0)">帮助</a></li> </ul> </div> </body> </html>
外链式js
function getele(id){ return document.getElementById(id); } function getfirstnode(ele){ var node=ele.firstElementChild || ele.firstChild; return node; } function getnextnode(ele){ return ele.nextElementSibling || ele.nextSibling; } function geteleofindex(ele,index){ return ele.parentNode.children[index]; } function getallsiblings(ele){ // 获取剩余未选中的兄弟节点 var newarr=[]; var arr= ele.parentNode.children; for(var i=0;i<arr.length;i++) { if (arr[i] !== ele) { newarr.push(arr[i]); } } return newarr }
