原生js选项卡

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>选项卡</title>
       <style type="text/css">
           input{
               width:80px;
               line-height:30px;
               color:#fff;
               font-weight: 600;
               border:none;
               background: yellowgreen;
           }
           .active{
               background: skyblue;
           }
           div{
               width:300px;
               height:220px;
               background:deepskyblue;
               display: none;
           }
           .checked{
               display: block;
           }
       </style>
   </head>
   <body>
       <input type="button" class="active"value="AAA" data-ind="0"/>
       <input type="button" value="BBB" data-ind="1"/>
       <input type="button" value="CCC" data-ind="2"/>
       <div class="checked">
           aaa
       </div>
       <div>bbb</div>
       <div>ccc</div>
       <script type="text/javascript">

           //方法一:
           /*var oBtns = document.getElementsByTagName("input"),
               oDivs = document.getElementsByTagName("div"),
               len = oBtns.length,i = 0,btn = null;
           for(;i < len;i++){
               btn = oBtns[i];
               btn.ind = i;
               btn.onclick = function(){
                   var ind = this.ind,j = 0;
                   //排他思想，清空所有，留下当前
                   for(;j < len;j++){
                       oBtns[j].className = "";
                       oDivs[j].className = "";
                   }
                   oBtns[ind].className = "active";
                   oDivs[ind].className = "checked";
               }
           }*/

           //方法二:委托(代理) 不能自动获取下标，需要自定义属性
           /*document.body.onclick = function(evt){
               var oBtns = document.getElementsByTagName("input"),
                   oDivs = document.getElementsByTagName("div"),e,target;
                   e = evt || window.event;
                   target = e.target || e.srcElement;
               if(target.nodeName.toUpperCase() == "INPUT"){
                   var ind = target.getAttribute("data-ind");
                   console.log(ind);
                   //排他
                   for(var j = 0,len = oBtns.length;j < len;j++){
                       oBtns[j].className = "";
                       oDivs[j].className = "";
                   }
                   oBtns[ind].className = "active";
                   oDivs[ind].className = "checked";
               }
           }*/

           //方法三:ES6
           /*var oBtns = Array.from(document.getElementsByTagName("input")),
               oDivs = Array.from(document.getElementsByTagName("div"));
               len = oBtns.length;
               oBtns.forEach( (btn,ind)=>{
                   btn.onclick = ()=>{
                       for(var j = 0;j < len;j++){
                           oBtns[j].className = "";
                           oDivs[j].className = "";
                       }
                       oBtns[ind].className = "active";
                       oDivs[ind].className = "checked";
                   }
               })*/

           //方法四:let
           /*var oBtns = Array.from(document.getElementsByTagName("input")),
               oDivs = Array.from(document.getElementsByTagName("div"));
               len = oBtns.length;
               for(let i = 0;i < len;i++){
                   oBtns[i].onclick = ()=>{
                       for(var j = 0;j < len;j++){
                           oBtns[j].className = "";
                           oDivs[j].className = "";
                       }
                       oBtns[i].className = "active";
                       oDivs[i].className = "checked";
                   }
               }*/

           //方法五:闭包1
           /*var oBtns = Array.from(document.getElementsByTagName("input")),
               oDivs = Array.from(document.getElementsByTagName("div"));
               len = oBtns.length;
               for(var i = 0;i < len;i++){
                   oBtns[i].onclick = (function(ind){
                       return function(){
                           for(var j = 0;j < len;j++){
                               oBtns[j].className = "";
                               oDivs[j].className = "";
                           }
                           oBtns[ind].className = "active";
                           oDivs[ind].className = "checked";
                       }
                   })(i)
               }*/

           //方法六:闭包2
           /*var oBtns = Array.from(document.getElementsByTagName("input")),
               oDivs = Array.from(document.getElementsByTagName("div"));
               len = oBtns.length;
               for(var i = 0;i < len;i++){
                   (function(ind){
                       oBtns[i].onclick = function(){ //这里写i或者ind都行
                           for(var j = 0;j < len;j++){
                               oBtns[j].className = "";
                               oDivs[j].className = "";
                           }
                           oBtns[ind].className = "active";
                           oDivs[ind].className = "checked";
                       }
                   })(i);
               }*/

           //方法七:   jQ
           //结构:div#tab ul>li ol>li>img
           /*$("#tab ul li").click(function(){
               $(this).addClass("active").siblings().removeClass("active");
               var index = $(this).index
               $(#tab ol li).eq(index).addClass("checked").siblings().removeClass("checked");
           });*/
       </script>

       <div id="div2" class="a b c"></div>
       <script type="text/javascript">
           //拓展增加类名，删除类名
           div2.classList.add("d");
           div2.classList.remove("b");
       </script>
   </body>
</html>

相关文章