大头

tab下拉菜单

这个想法早就有的 （写tab下拉菜单）就觉得自己对js不是很熟   所以一直没有写 花了不少时间 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>tab下拉菜单</title>
        <style type="text/css">
            *{padding: 0px;margin: 0px;text-decoration: none;margin: 0 auto;width: 500px;list-style: none;text-align: center;}
            #Div{height: 50px;margin-top: 50px;}
            .nav ul{height: 50px;position: absolute;display: block;}
            .nav  li{ float: left;width: 150px;line-height: 50px;margin-right: 10px;box-shadow: 2px 2px 2px saddlebrown;background: brown;border-radius: 5px 5px 0 0;}
            #main {width: 500px;height: 200px;background: darkgrey;display: block;}
            .nav  li:hover{background: darkgrey;box-shadow: 2px 2px 2px darkgrey;font-size:30px;}
            #o2,#o3{display: none;}
        </style>
        <script type="text/javascript">
            function ChangedFt(Q){
                var d;
                var id;
                for(var i=1;i<4;i++){
                    id="one"+i;//复制ID
                    j=document.getElementById(id);//获取ID的标签
                    d=document.getElementById("o"+i);//获取获取#main  ID的标签
                    if(id!= Q.id){                    //如果循环的ID值与当前的onmousover的ID值不相同  
                        d.style.display="none";     //如果不相等   #main里面的内容不显示  
                    }else{
                        d.style.display="block";    //=  则#main里面的内容显示
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="Div">
            <ul class="nav">
                <li class="three" id="one1" onmouseover="ChangedFt(this)"><a href="#">JS</a></li>
                <li class="one" id="one2" onmouseover="ChangedFt(this)"><a href="#">CSS</a></li>
                <li class="one" id="one3" onmouseover="ChangedFt(this)"><a href="#">HTML</a></li>
                
            </ul>
        </div>
        <div id="main">
            <div id="o1">
                <a href="#">JSJSJS</a>
            </div>
            <div id="o2">
                <a href="#">CSS</a>
            </div>
            <div id="o3">
                <a href="#">HTML</a>
            </div>
        </div>
    </body>
</html>
View Code

效果：

最后我想了哈用swith  弄了哈  内容是叠加的  不晓得怎么把内容实现完全更新

posted @ 2016-02-06 23:33  and大头  阅读(430)  评论(0)  编辑  收藏  举报

大头