js面向对象实现切换面板

weixin_30457065

于 2017-06-27 20:10:00 发布

阅读量68

点赞数

原文链接：http://www.cnblogs.com/rlann/p/7086934.html

版权

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';
            }

转载于:https://www.cnblogs.com/rlann/p/7086934.html

weixin_30457065

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js面向对象实现切换面板

js面向对象的特点：继承(inheritance)：对象方法和属性的继承多态(polymorphism)：组件开发抽象(abstract)：抓住核心问题封装(encapsulation)：把功能写出方法面向过程式切换面板实现：<!DOCTYPE HTML><html> <head> <meta c...
复制链接

扫一扫