面对对象实例

最新推荐文章于 2023-03-12 18:36:02 发布

perfect_xiaoxian

最新推荐文章于 2023-03-12 18:36:02 发布

阅读量108

点赞数

分类专栏： JavaScript 文章标签：面向对象选项卡选项卡

本文链接：https://blog.csdn.net/baobao__/article/details/100861566

版权

JavaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

选项卡

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box div {
            width: 300px;
            height: 300px;
            border: 2px solid red;
            display: none;
        }
    </style>
</head>

<body>
    <div id="box">
        <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮三</button>
        <div style="display: block">aaa</div>
        <div>bbb</div>
        <div>ccc</div>
    </div>
    
    //js部分
    <script>
        function TabSwitch() {
            var oBox = document.getElementById("box"); //
            this.oBtn = oBox.getElementsByTagName("button");
            this.oDiv = oBox.getElementsByTagName("div");
            var _this = this;
            for (var i = 0; i < this.oBtn.length; i++) {
                this.oBtn[i].index = i;
                this.oBtn[i].onclick = function () {
                    //调用切换的方法
                    _this.change(this.index);
                }
            }
        }
        TabSwitch.prototype.change = function (index) {
            for (var j = 0; j < this.oDiv.length; j++) {
                this.oDiv[j].style.display = "none";
            }
            this.oDiv[index].style.display = "block";
        }
        new TabSwitch();
    </script>
</body>

</html>