基于面向对象的选项卡-前端--易笔记

基于面向对象的选项卡
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            body {
                padding: 50px;
            }

            #box p {
                width: 200px;
                height: 200px;
                border: 1px solid #000;
                display: none;
            }

            #box input {
                width: 50px;
                height: 40px;
                background: #d8d8d8;
            }

            #box input.active {
                background: red;
            }
        </style>
    </head>

    <body>
        <p id="box">
            <input class="active" type="button" name="" id="" value="a" />
            <input type="button" name="" id="" value="b" />
            <input type="button" name="" id="" value="c" />
            <p style="display: block;">1</p>
            <p>2</p>
            <p>3</p>
        </p>
    </body>
    <script>
        window.onload = function() {
            var t1 = new Tab('box');
            t1.int();
        }       

        function Tab(id) {
            var oBox = document.getElementById(id);
            this.abtns = oBox.getElementsByTagName('input');
            this.aDivs = oBox.getElementsByTagName('p');          
            this.int();
        }
        Tab.prototype.int = function() {
            var _this = this;
            for (var i = 0; i < this.abtns.length; i++) {
                this.abtns[i].index = i;
                this.abtns[i].onclick = function() {
                    _this.click(this);
                }
            }
        }
        Tab.prototype.click = function(obt) {
            for (var i = 0; i < this.abtns.length; i++) {
                this.abtns[i].className = '';
                this.aDivs[i].style.display = 'none';
            }
            obt.className = 'active';
            this.aDivs[obt.index].style.display = 'block';
        }
    </script>

</html>
时间：2017/7/1 9:27:00
