2020-12-21

最新推荐文章于 2022-11-20 15:26:36 发布

苏苏-a

最新推荐文章于 2022-11-20 15:26:36 发布

阅读量52

点赞数

本文链接：https://blog.csdn.net/m0_51242432/article/details/111501183

版权

选项卡

    <style>
    /* #div1 div,#div2 div,#div3 div { */     写多个只需改的位置1
        #div1 div {
            width: 200px;
            height: 200px;
            border: 3px red solid;
            display: none;
        }

        .active {
            background-color: red;
        }
        
    </style>
    <body>
    <div id="div1">
        <input type="button" value="1" name="" id="active">
        <input type="button" value="2" name="" id="">
        <input type="button" value="3" name="" id="">

        <div style="display: block;">111</div>
        <div>222</div>
        <div>333</div>

    </div>


    <!-- <div id="div2">     写多个只需改的位置2
        <input type="button" value="1" name="" id="active">
        <input type="button" value="2" name="" id="">
        <input type="button" value="3" name="" id="">

        <div style="display: block;">111</div>
        <div>222</div>
        <div>333</div>

    </div>
    <div id="div3">
        <input type="button" value="1" name="" id="active">
        <input type="button" value="2" name="" id="">
        <input type="button" value="3" name="" id="">

        <div style="display: block;">111</div>
        <div>222</div>
        <div>333</div>

    </div> -->

//过程函数写法
<script>
        var aButton;
        var oParent;
        var aDiv;
        function init() {
            for (var i = 0; i < aButton.length; i++) {
                aButton[i].index = i;
                aButton[i].onclick = function () {
                    change(this);
                }
            }
        }

        function change(obj) {
            console.log(obj.index);
            for (var j = 0; j < aDiv.length; j++) {
                aButton[j].className = '';
                aDiv[j].style.display = 'none';
            }
            obj.className = 'active'
            aDiv[obj.index].style.display = 'block';
        }
        window.onload = function () {
            aButton = document.querySelectorAll('input');
            oParent = document.getElementById('div1');
            aDiv = oParent.getElementsByTagName('div');

            init();
        }
    </script>

//面向对象写法
<script>
        //选项卡类 属性和方法
        function Tab(id) {
            this.oParent = document.getElementById(id);
            this.aButton = this.oParent.querySelectorAll('input');
            this.aDiv = this.oParent.getElementsByTagName('div');
            this.show();

        }
        Tab.prototype = {
            constructor: Tab,
            show: function () {
                var That = this;
                // console.log(this.aButton);
                for (var i = 0; i < That.aButton.length; i++) {
                    //IIFF自执行函数
                    (function (i) {
                        That.aButton[i].onclick = function () {
                            That.change(i,this); //执行一下change函数
                        }
                    })(i)

                }
            },
            change: function (i,obj) {
                for (var j = 0; j < this.aDiv.length; j++) {
                    this.aButton[j].className = '';
                    this.aDiv[j].style.display = 'none';
                }
                obj.className = 'active';
                this.aDiv[i].style.display = 'block';
            }
        }

        window.onload = function () {
                //选项卡实例对象
                new Tab('div1');

                /* new Tab('div2');   位置3
                new Tab('div3'); */
            }
    </script>