首页 > 代码库 > javascript中菜单栏切换案例
javascript中菜单栏切换案例
<!DOCTYPE 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; position: relative; } #list li.current { background-color: burlywood; } #list li a { text-decoration: none; display:inline-block; } .odd { background-color: #ccc; } .even { background-color: #999; } </style></head><body><div id="menu"> <ul id="list"> <li class="current"><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> <li><a href="javascript:void(0)">帮助</a></li> </ul></div><script> var ul = document.getElementById("list"); //ul.getElementsByTagName("li") 不管层级关系 //ul.childNodes 是通过层级关系获取的 这种方式很好 //只是 他获取到的不只是我们想要的元素 还有其他东西 var lis = ul.children;//所有的子元素 //给所有的li 绑定排他事件 for (var i = 0; i < lis.length; i++) { lis[i].onmouseout=function(){ this.style.transform="scale(1)"; }; lis[i].onmouseover = function () { //干掉所有人 for (var j = 0; j < lis.length; j++) { lis[j].className = ""; lis[j].style.zIndex=""; } //留下我自己 this.className = "current"; this.style.zIndex="1";//设置层级必须加定位啊！！！！ // this.style.transform="rotate(30deg)"; this.style.transform="scale(2)"; }; }</script></body></html>
javascript中菜单栏切换案例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。