zoukankan      html  css  js  c++  java
  • 面向对象选项卡

    布局很简单。第一个选项卡box,第二个选项卡box2,这体现了面向对象构造函数级原型最大的优点 ,复用

    <div class="box" id="box">
            <input type="button" value="按钮1" class="on" />
            <input type="button" value="按钮2" />
            <input type="button" value="按钮3" />
            <div class="show">11111</div>
            <div>22222</div>
            <div>33333</div>
        </div>
        <div class="box" id="box2">
            <input type="button" value="按钮1" class="on" />
            <input type="button" value="按钮2" />
            <input type="button" value="按钮3" />
            <div class="show">11111</div>
            <div>22222</div>
            <div>33333</div>
        </div>

    样式我就不上了

    JS代码,不明白看可以看下注释

    //元素获取
    function Tab(id){//Tab 构造函数
        this.oBox=document.getElementById(id);
        this.aBtn=this.oBox.getElementsByTagName('input');
        this.aDiv=this.oBox.getElementsByTagName('div');
        this.iNow=0;
        this.init();//选项卡操作在这里执行
    }
    //事件操作
    Tab.prototype.init=function (){//Tab原型
        var _this=this;//this 赋值,内部事件函数不能直接使用this
        for(var i=0; i<this.aBtn.length; i++){
            this.aBtn[i].index=i;
            this.aBtn[i].onclick=function (){
                _this.iNow=this.index;//同理iNow赋值
                tab();
            };
        }
        //选项卡核心
        function tab(){//这个是提出公共部分
            for(var i=0; i<_this.aBtn.length; i++){
                _this.aBtn[i].className='';
                _this.aDiv[i].className='';
            }
            _this.aBtn[_this.iNow].className='on';
            _this.aDiv[_this.iNow].className='show';
        }
    };

    最后就是调用了,也可以说实例化,不是实例化的话 ,是用不了的。

    window.onload=function (){
        new Tab('box');
        new Tab('box2');
    };
  • 相关阅读:
    python的IDE(pycharm)安装以及简单配置
    python环境搭建(python2和python3共存)
    如何搭建samba服务?
    css 样式 文字过长 换行处理方法
    my97 日历控件
    myeclipse8.6 注册码
    (46) odoo核心文档分享
    (01-02) odoo8.0_Ubuntu14.04_nginx反代理设置
    (45) Manifest文件
    (44) odoo中的WebService
  • 原文地址:https://www.cnblogs.com/NTWang/p/6103567.html
Copyright © 2011-2022 走看看