码迷,mamicode.com
首页 > Web开发 > 详细

JS 二级菜单栏的tab切换

时间:2018-07-18 19:13:01      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:back   lis   lin   order   .class   border   space   body   over   

        <style>
             #first{
                display: flex;
                justify-content:space-between;
               }
              li{
                list-style-type:none ;
                border: 1px solid #999;
                width: 150px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                background-color: pink;
                color: white;
               }
             div{
                display: flex;
                justify-content: space-between;
               }
            .active{
                background-color: darkgrey;
               }
            .show{
                display: block;
               }
            .style{
                display: none;
               }
             li>ul{
                display: none;
                margin-left: -41px;
               }
          </style>
        </head>
        <body>
            <ul id="first">
               <li onmouseover="hov(‘one‘,this)" onmouseout="out(‘one‘,this)">列表一    //给每个菜单栏设置鼠标移入移出事件
                  <ul id="one">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                  </ul>
               </li>
               <li onmouseover="hov(‘two‘,this)" onmouseout="out(‘two‘,this)">列表二
                  <ul id="two">
                    <li>11</li>
                    <li>22</li>
                    <li>33</li>
                    <li>44</li>
                 </ul>
               </li>
               <li onmouseover="hov(‘three‘,this)" onmouseout="out(‘three‘,this)">列表三
                  <ul id="three">
                    <li>55</li>
                    <li>66</li>
                    <li>77</li>
                    <li>88</li>
                 </ul>
               </li>
               <li onmouseover="hov(‘four‘,this)" onmouseout="out(‘four‘,this)">列表四
                  <ul id="four">
                    <li>88</li>
                    <li>433</li>
                    <li>222</li>
                    <li>124</li>
                  </ul>
               </li>
            </ul>
        <script>
             function hov(id1,e){
                 var num = document.querySelector("#" + id1);
                  num.className="show";
                  e.className="active";
             }
             function out(id1,e){
                  var num = document.querySelector("#" + id1);
                  num.className="";
                  e.className="";
             }
        </script>
    </body>
</html>

使用鼠标移入移出事件,,,,,,,,,,,,,,,

JS 二级菜单栏的tab切换

标签:back   lis   lin   order   .class   border   space   body   over   

原文地址:https://www.cnblogs.com/haijuanya/p/9330839.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!