以梦为马，不负韶华。

导航

换肤加二级下拉菜单功能（传参） 

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>换肤加导航栏</title>
    <style type="text/css">
        /*排他思想写换肤*/
        /*导航栏二级下拉菜单*/
        *{
            margin: 0;
            padding: 0;
            list-style-type: none;
            text-decoration: none;
            margin: 0 auto;
        }
        #main{
            width:800px;
            height: 60px;
            position: relative;
        }
        #nav{
            width: 800px;
            height: 60px;
            background-color: paleturquoise;
            position: absolute;
            left: 50%;
            margin-left: -400px;
            top: 60px;
            /*margin-left: -300px;*/
        } 
        #na{
            width: 100px;
            text-align: center;
        }
        .a{
            border: 1px  solid deeppink;
            width: 100px;
            display: block;
            height:30px;
            line-height: 30px;
        }
        #na ul{
            height: 0px;
            overflow: hidden;
        }
        #nav div{
            float: left;
            margin-left: 20px;
        }
        #huanfu{
            position: absolute;
            top: 20px;
        }
        #huanfu button{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            
        }
        .btn_blue{
            background-color: blue;
        }
        .btn_green{
            background-color: green;
        }
        .btn_red{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="huanfu" class="huanfu">
            <button onclick="color('red')" class="btn_red"><!--  --><!--style="background-color: red;"--></button>
            <button onclick="color('green')" class="btn_green" > <!----><!--style="background-color: green;"--></button>
            <button onclick="color('blue')" class="btn_blue"><!----> <!--style="background-color: blue;"--></button>
        </div>
        <div id="nav" class="nav">
            <div id="na">
                <a href="#" class="a">首页</a>
                <ul>
                    <li>我的淘宝</li>
                    <li>我的收藏</li>
                    <li>浏览历史</li>
                </ul>
            </div>
            <div id="na">
                <a href="#" class="a">首页</a>
                <ul>
                    <li>我的淘宝</li>
                    <li>我的收藏</li>
                    <li>浏览历史</li>
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var navdiv=document.getElementsByClassName('nav')[0].getElementsByTagName('div');
        var navul=document.getElementsByClassName('nav')[0].getElementsByTagName('ul');
//        var red=document.getElementsByTagName()
//        var btns=document.getElementsByClassName('huanfu').getElementsByTagName('button');    
        for(var i=0;i<navdiv.length;i++){
            (function(j){
                navdiv[j].onmouseover=function(){
                    navul[j].style.height=120+"px";
                }
                navdiv[j].onmouseout=function(){
                    navul[j].style.height=0+"px";
                }
            })(i);
        }
        
                                        //传参方法
        function color(color){
            var bo=document.body;
            var nav=document.getElementById('nav');
            bo.style.backgroundColor=color;
            nav.style.backgroundColor='pink';
        }
    </script>
</body>
</html>

 

posted on 2019-12-02 08:27  小冉哥、  阅读(125)  评论(0)    收藏  举报