javascript选项卡OOP实现方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选项卡</title>
    <style type="text/css">
        #div1 input{background: #ffffff;}
        #div1 input.active{background: yellow;}
        #div1 div{width: 200px; height: 200px; background: red; display: none;}
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            var aBtn = oDiv.getElementsByTagName('input');
            var aDiv = oDiv.getElementsByTagName('div');
            for(var i=0;i<aBtn.length;i++)
            {
                aBtn[i].index = i;
                aBtn[i].onclick = function(){
                    for(var j=0;j<aBtn.length;j++)
                    {
                        aBtn[j].className = '';
                        aDiv[j].style.display = 'none';
                    }
                    this.className = 'active';
                    aDiv[this.index].style.display = 'block';
                };
            }
        };
    </script>
</head>
<body>
<div id="div1">
    <input type="button" class="active" value="a"/><input type="button" value="b"/><input type="button" value="c"/>
    <div style="display: block;">1111111</div>
    <div>2222222</div>
    <div>3333333</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象选项卡</title>
    <style type="text/css">
        #div1 input{background: #ffffff;}
        #div1 input.active{background: yellow;}
        #div1 div{width: 200px; height: 200px; background: red; display: none;}
    </style>
    <script type="text/javascript">
        //window.onload变成构造函数，变量变成属性，函数变成方法
        function TabSwitch(id)
        {
            var _this = this;//_this指的是类TabSwitch实例化的对象
            var oDiv = document.getElementById(id);
            this.aBtn = oDiv.getElementsByTagName('input');
            this.aDiv = oDiv.getElementsByTagName('div');
            for(var i=0;i<this.aBtn.length;i++)
            {
                this.aBtn[i].index = i;
                this.aBtn[i].onclick = function(){
                    _this.fnClick(this);//this指的是aBtn[i]，
                };
            }
        }
        TabSwitch.prototype.fnClick = function(oBtn)
        {
            for(var j=0;j<this.aBtn.length;j++)
            {
                this.aBtn[j].className = '';
                this.aDiv[j].style.display = 'none';
            }
            //this.className = 'active';
            this.aDiv[oBtn.index].style.display = 'block';
            this.className = 'active';
        }
        window.onload = function()
        {
            var oTabSwitch = new TabSwitch('div1');
        };
    </script>
</head>
<body>
<div id="div1">
    <input type="button" class="active" value="a"/><input type="button" value="b"/><input type="button" value="c"/>
    <div style="display: block;">1111111</div>
    <div>2222222</div>
    <div>3333333</div>
</div>
</body>
</html>

工欲善其事必先利其器

相关阅读:
数据结构队列
 数据结构堆栈
 UNP学习广播
 UNP学习路由套接口
 QTcpSocket发送结构体
 线性表及实现
 [转]理解WSRF之一使用WS-ResourceProperties (整理自IBM网站)
详解x86、IA-32、IA-64等CPU系列
 gsoap框架下的onvif程序流程分析
 【LeetCode】从contest-21开始。（一般是10个contest写一篇文章）
原文地址：https://www.cnblogs.com/fengyouqi/p/7767544.html