javascript中菜单栏切换案例
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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中菜单栏切换案例的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript高级-----2.面向对象(案例 Tab栏切换)
使用 Javascript 切换的导航栏汉堡的响应式下拉菜单适用于 Chrome、Firefox，但不适用于 Safari