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>

 

posted @ 2016-09-17 22:05  萧诺  阅读(1674)  评论(0)  编辑  收藏  举报