感谢您的支持,我会继续努力的!
打开微信扫一扫,即可进行扫码打赏哦
点我查看本站打赏源码!
Powered by RUNCODEX.COM,学的不仅是技术,更是梦想!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<ul class="menu">
<li><a href="#" class="menuList active" onclick="changeClass();this.className='active';">首页</a></li>
<li><a href="#" class="menuList" onclick="changeClass();this.className='active';">菜鸟笔记</a></li>
<li><a href="#" class="menuList" onclick="changeClass();this.className='active';">菜鸟工具</a></li>
<li><a href="#" class="menuList" onclick="changeClass();this.className='active';">参考手册</a></li>
<li><a href="#" class="menuList" onclick="changeClass();this.className='active';">文档集合</a></li>
</ul>
</body>
</html>
xxxxxxxxxx
function changeClass(){
var active = document.getElementsByClassName("active")[0];
active.classList.remove("active");
/*document.getElementsByTagName("A")[0].setAttribute("class","");
document.getElementsByTagName("A")[1].setAttribute("class","");
document.getElementsByTagName("A")[2].setAttribute("class","");
document.getElementsByTagName("A")[3].setAttribute("class","");
document.getElementsByTagName("A")[4].setAttribute("class","");*/
}
/*清除样式*/
body,ul,li,a{margin:0;padding:0;font-size:14px;color:#000;}
ul{list-style:none;}
a{text-decoration:none;}
/*通用样式*/
.menu{;height:35px;line-height:35px;background-color:#5d5d5d;}
.menu li a{height:35px;width:80px;text-align:center;float:left;color:#fff}
.menu li a:hover,.active{background-color:#505050}
/*5D5D5D 505050 fff*/