原生js选项卡

时间:2022-12-24 17:10:37

<!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>