master

分支 (1)

管理

管理

master

ESC6
/
选项卡应用1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡应用</title>
    <style>
        .box div{
            display: none;
            border:1px solid #000;
            width: 200px;
            height: 200px
            }
        .on{color: #fff;background: tomato}
    </style>
</head>
<body>
    <script>
        // 选项卡
        class Tab{   //步骤2
            constructor(id){
                this.oBox = document.getElementById(id);
                this.aBtn = this.oBox.getElementsByTagName('input')
                this.aDiv = this.oBox.getElementsByTagName('div')
                this.init()
            }
            init(){  //步骤3
                for (let i = 0; i < this.aBtn.length; i++) {
                    this.aBtn[i].onclick=function(){
                        // alert(this);
                        this.hide();
                        this.show(i);
                    }.bind(this)  //矫正this指向
                }
            }
            hide(){
                for (let i = 0; i < this.aBtn.length; i++) {
                    this.aBtn[i].className=''
                    this.aDiv[i].style.display='none'
                }
            }
            show(dd){
                this.aBtn[dd].className='on';
                this.aDiv[dd].style.display='block'
            }
        }
        // 这几行为：继承
        // class AutoTab extends Tab{
        // }
        // window.onload = function(){
        //     new Tab('box')
        //     new AutoTab('box2')
        // }

        window.onload = function(){
            new Tab('box')    // 步骤1
        }


    </script>
    <div id="box" class="box">
        <input type="button" value="aaa" class="on">
        <input type="button" value="bbb">
        <input type="button" value="ccc">
        <div style="display:block">111</div>
        <div>222</div>
        <div>333</div>
    </div>

    <div id="box2" class="box">
            <input type="button" value="aaa" class="on">
            <input type="button" value="bbb">
            <input type="button" value="ccc">
            <div style="display:block">111</div>
            <div>222</div>
            <div>333</div>
        </div>
</body>
</html>