原生js TAB切换

来源：互联网发布：视频播放插件video.js 编辑：程序博客网时间：2024/06/05 20:56
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />    <title>Document</title>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        img{            border:0;        }        ol, ul ,li{list-style: none;}        .div-1{            width: 300px;            height: 30px;            background-color: red;        }        .div-2{            width: 300px;            height: 300px;            background-color: pink;            position: absolute;            top:30px;            left:0;            display: none;        }        .div-11{            width: 100px;            height: 30px;            background-color:yellow;            float:left;            cursor: pointer;            text-align: center;            line-height:30px;        }        .show{            display:block;        }        .show-1{            background-color: red;        }    </style></head><body>    <div>        <div class="div-1" id="div_1">            <div class="div-11 show-1">dsada</div>            <div class="div-11">dsadsa</div>            <div class="div-11">dsadsa</div>        </div>        <div id="div_22">          <div class="div-2 show">a</div>          <div class="div-2">s</div>          <div class="div-2">b</div>        </div>    </div></body></html> <script type="text/javascript">         var div_1=document.getElementById('div_1');         var div_1Child=div_1.children;         var div_22=document.getElementById('div_22');         var div_22Child=div_22.children;                  for(var i=0;i<div_1Child.length;i++){                div_1Child[i].index=i;                  div_1Child[i].onclick=function(){                  for(var j=0;j<div_1Child.length;j++){                        div_1Child[j].className="div-11";                                              div_22Child[j].className="div-2";                                           }                                   div_1Child[this.index].className="div-11 show-1";                   div_22Child[this.index].className="div-2 show";                }         }    </script>
阅读全文
1 0