面向对象版选项卡

Posted 2020-09-06 Edison~~

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了面向对象版选项卡相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
            list-style: none;
        }
        #box1,#box2,#box3{
            width:500px;
            height:500px;
            border:1px solid red;
        }
        #box1 input,#box2 input,#box3 input{
            background: yellow;
        }
        #box1 .active,#box2 .active,#box3 .active{
            background: red;
        }
        #box1 div,#box2 div,#box3 div{
            width:300px;
            height:300px;
            background: red;
            font-size: 50px;
            text-align: center;
            line-height: 300px;
            display: none;
        }
        #box1 .show,#box2 .show,#box3 .show{
            display: block;
        }
    </style>
</head>
<body>
    <div id="box1">
        <input type="button" value="按钮1" class="active">
        <input type="button" value="按钮2">
        <input type="button" value="按钮3">
        <div class="show">1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div id="box2">
        <input type="button" value="按钮1" class="active">
        <input type="button" value="按钮2">
        <input type="button" value="按钮3">
        <input type="button" value="按钮4">
        <input type="button" value="按钮5">
        <div class="show">1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
    <div id="box3">
        <input type="button" value="按钮1" class="active">
        <input type="button" value="按钮2">
        <input type="button" value="按钮3">
        <input type="button" value="按钮4">
        <input type="button" value="按钮5">
        <input type="button" value="按钮6">
        <input type="button" value="按钮7">
        <div class="show">1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </div>
    <script>
        function tab(id) {
            var _this = this;
            this.oBox = document.getElementById(id);
            this.aBtn = this.oBox.getElementsByTagName(‘input‘);
            this.aBox = this.oBox.getElementsByTagName(‘div‘);
            for (var i=0; i<this.aBtn.length; i++) {
                this.aBtn[i].index = i;
                this.aBtn[i].onclick = function () {
                    _this.fnClick(this)
                }
            }
            tab.prototype.fnClick = function (oBtn) {
                for (var i=0; i<this.aBtn.length; i++) {
                    this.aBtn[i].className = ‘‘;
                    this.aBox[i].className = ‘‘;
                }
                this.aBox[oBtn.index].className = ‘show‘;
                oBtn.className = ‘active‘;
            }
        }
        new  tab(‘box1‘);
        new  tab(‘box2‘);
        new  tab(‘box3‘);
    </script>
</body>
</html>

以上是关于面向对象版选项卡的主要内容，如果未能解决你的问题，请参考以下文章