多个选项卡

来源：互联网发布：有什么好的网游知乎编辑：程序博客网时间：2024/05/17 12:52
多个选项卡的思路就是封装函数然后传参
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            #box1,#box2,#box3{                margin:0 auto;                clear:both;                width:500px;            }            li{                width:100px;                height:50px;                float:left;                list-style: none;                border-top:1px red solid;                border-bottom:1px red solid;                border-right:1px red solid;            }            li:first-of-type{                border-left:1px red solid;            }            .color{                background:bisque;                color:palevioletred;                display:block;            }            .colornot{                background:bisque;                color:palevioletred;                display:none;            }            #box1 div, #box2 div,#box3 div{                float:left;                width:500px;                height:50px;                text-align: center;                line-height: 50px;                text-decoration: none;                  display: none;                }        </style>    </head>    <body>        <script type="text/javascript">            window.onload=function(){                tab("box1", "click");//点击                tab("box2", "mouseover");//鼠标移入                tab("box3","mouseout")//鼠标移出                function tab(id,event){                    //获取元素                    var oDiv = document.getElementById(id);                    var oLi = oDiv.getElementsByTagName("li");                    var oUl = oDiv.getElementsByTagName("div");                    for(var i= 0 ; i<oLi.length;i++){                        //用index接受传进的i                        (function(index){                                oLi[index].addEventListener(event,function(){                                    for(var i = 0 ; i<oLi.length;i++){                                        //每一次event之前先清空样式并且统一隐藏                                        oLi[i].className="";                                        oUl[i].style.display="none";                                    }                                //event之后让被点击（鼠标移入移出）的那一个赋予样式并且对应的div显示出来                                    this.className="color";                                    oUl[index].style.display = "block";                                });                        })(i)                    }                }        }        </script>        <div id="box1">            <ul id="ul1" class="oul">                <li class="color">吃</li>                <li>喝</li>                <li>玩</li>                <li>乐</li>            </ul>            <div style="display: block">11</div>            <div>12</div>            <div >13</div>            <div>14</div>        </div>        <div id="box2">            <ul id="ul2" class="oul">                <li class="color">吃</li>                <li>喝</li>                <li>玩</li>                <li>乐</li>            </ul>            <div style="display:block">21</div>            <div>22</div>            <div>23</div>            <div>24</div>        </div>        <div id="box3">            <ul id="ul3" class="oul">                <li class="color">吃</li>                <li>喝</li>                <li>玩</li>                <li>乐</li>            </ul>            <div style="display:block">31</div>            <div>32</div>            <div>33</div>            <div>34</div>        </div>    </body></html>
阅读全文
0 0