js面向对象实现切换面板

Posted 梦见一只电子羊

tags:

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

js面向对象的特点：

继承(inheritance)：对象方法和属性的继承

多态(polymorphism)：组件开发

抽象(abstract)：抓住核心问题

封装(encapsulation)：把功能写出方法

面向过程式切换面板实现：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>切换面板</title>
        <style>
            #div1 input {
                background: white;
            }
            
            #div1 input.active {
                background: yellow;
            }
            
            #div1 div {
                width: 200px;
                height: 200px;
                background: #CCC;
                display: none;
            }
        </style>
        <script>
            window.onload = function() {
                var div = document.getElementById(‘div1‘);
                var ipt = oDiv.getElementsByTagName(‘input‘);
                var divContents = oDiv.getElementsByTagName(‘div‘);
                for(var i = 0; i < aBtn.length; i++) {
                    ipt[i].index = i;
                    ipt[i].onclick = function() {
                        //隐藏所有，显示所点击面板
                        for(var i = 0; i < ipt.length; i++) {
                            ipt[i].className = ‘‘
                            ipt[i].style.display = ‘none‘;
                        }
                        this.className = ‘active‘;
                        ipt[this.index].style.display = ‘block‘;
                    };
                }
            };
        </script>

    </head>

    <body>
        <div id="div1">
            <input class="active" type="button" value="aaa" />
            <input type="button" value="bbb" />
            <input type="button" value="ccc" />
            <div style="display:block;">saysomething</div>
            <div>sayHello</div>
            <div>sayGoodbye</div>
        </div>
    </body>
</html>

面向对象方法：

            window.onload = function() {
                new TabSwitch(‘div1‘);
            };

            function TabSwitch(id) {
                //将属性挂到this
                var _this = this;//注意this的改变
                var div = document.getElementById(id);
                this.ipt = div.getElementsByTagName(‘input‘);
                this.divContents = div.getElementsByTagName(‘div‘);

                for(var i = 0; i < this.ipt.length; i++) {
                    this.ipt[i].index = i;
                    this.ipt[i].onclick = function() {
                        _this.fnClick(this);
                    };
                }
            };
            //函数不嵌套，方法写入原型
            TabSwitch.prototype.fnClick = function(ref) {
                for(var i = 0; i < this.ipt.length; i++) {
                    this.ipt[i].className = ‘‘
                    this.divContents[i].style.display = ‘none‘;
                }
                ref.className = ‘active‘;
                this.divContents[ref.index].style.display = ‘block‘;
            }

 

以上是关于js面向对象实现切换面板的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段9——JS中的面向对象编程

JS 面向过程和面向对象实现 Tab选项卡切换

纯JS制作选项卡--JavaScript实例集锦（初学）

以选项卡的故事扯扯js面向对象

原生JS面向对象思想封装轮播图组件

JS高级——面向对象方式解决tab栏切换问题