基于面向对象的选项卡

最新推荐文章于 2020-07-02 17:00:05 发布

TAT0_0

最新推荐文章于 2020-07-02 17:00:05 发布

阅读量246

点赞数

本文链接：https://blog.csdn.net/yesbuy201701/article/details/73924511

版权

<!DOCTYPE html>
<html>

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

            body {
                padding: 50px;
            }

            #box div {
                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>
        <div 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" />
            <div style="display: block;">1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </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('div');          
            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>