JavaScript面向对象-实现tab切换

页面中有多个选项卡,采用面向对象的方式实现. 代码简洁,有效减少代码冗余,便于后期维护

Paste_Image.png

大家可以在这个基础上根据需求进行扩展,将数据做成动态的...直接上代码吧!

html 页面结构:

<div id="container1">
        <input type="button" value="李易峰<1>">
        <input type="button" value="杨幂<1>">
        <input type="button" value="张艺兴<1>">
        <div>![](img/001.png)</div>
        <div>![](img/002.png)</div>
        <div>![](img/003.png)</div>
    </div>
    <div id="container2">
        <input type="button" value="张艺兴<2>">
        <input type="button" value="杨幂<2>">
        <input type="button" value="李易峰<2>">
        <div>![](img/003.png)</div>
        <div>![](img/002.png)</div>
        <div>![](img/001.png)</div>
    </div>

css 样式

#container1 div{
        width : 400px;
        height: 260px;
        display: none;
    }
    #container2 {
        margin-top:10px;
    }
    #container2 div{
        width : 400px;
        height: 260px;
        display: none;
    }

js实现功能

//Tab构造函数
        function Tab(containerId,obj){
            //外部容器
            this.container = document.getElementById(containerId);
            //tab按钮
            this.aInput = this.container.getElementsByTagName('input');
            //放置对应内容
            this.aDiv = this.container.getElementsByTagName('div');
            //切换后当前input背景色
            this.ChangeTabBgc = obj.ChangeTabBgc;
            //切换后当前input字体颜色
            this.ChangeTabColor = obj.ChangeTabColor;
        }

        Tab.prototype.init = function(){
            this.DefaultStyle();
        }
        Tab.prototype.DefaultStyle = function () {
            // 设置默认显示
            this.aInput[0].style.backgroundColor = this.ChangeTabBgc;
            this.aDiv[0].style.display = 'block';
            // 缓存实例对象
            var that = this;
            // 绑定单击事件
            for (var i = 0; i < this.aInput.length; i++) {
                this.aInput[i].index = i;
                this.aInput[i].onclick = function(){
                    // 实现样式切换功能
                    // 这里的this是点击的按钮
                    that.change(this);
                }
            }
        }
        //点击事件触发后内部处理
        Tab.prototype.change = function(obj){
            //清除所有样式
            for (var i = 0; i < this.aInput.length; i++) {
                this.aInput[i].style.color = "";
                this.aInput[i].style.backgroundColor = '';
                this.aDiv[i].style.display = 'none';
            }
            //当前选中的标签和显示内容设置样式
            obj.style.backgroundColor = this.ChangeTabBgc;
            this.aDiv[obj.index].style.display = 'block';
            obj.style.color = this.ChangeTabColor;
        }

js实例化选项卡对象

 var tab1 = new Tab('container1',{
            ChangeTabBgc:'yellowgreen',
            ChangeTabColor:"#fff",
         });
 tab1.init();
 var tab2 = new Tab('container2',{
         ChangeTabBgc:'purple',
         ChangeTabColor:"#fff",
    });
tab2.init();

好了,我们已经初步完成了选项卡功能了,如果需要扩展功能,直接在原型上添加方法即可...