将面向过程的选项卡改为面向对象的选项卡（接上一篇博客）

面向过程-选项卡代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡</title>
    <style>
        #div1 input {background:#CCC;}
        #div1 div {width:200px; height:200px; background:#CCC; display:none;}
        #div1 .active {background:yellow;}
        #div1 .kin {background:red;}
    </style>
    <script>
        window.onload = function() {
            var oDiv = document.getElementById('div1');
            var aBtn = oDiv.getElementsByTagName('input');
            var aDiv = oDiv.getElementsByTagName('div');
            var i = 0;

            for(i = 0; i < aBtn.length; i++){
                // index 属性可返回标签的索引位置
                aBtn[i].index = i;
                //测试i的索引位置
                // alert(i); 

                // 给onclick事件添加自定义方法
                aBtn[i].onclick = function() {
                    for(i = 0; i < aBtn.length; i++){
                        // 给未点击的按钮添加class="kin"
                        aBtn[i].className = 'kin';
                        // 给当前Div的class添加style="display:none"
                        aDiv[i].style.display = 'none';
                    }
                    // 鼠标点击那个按钮就给那个添加class="active"
                    this.className = 'active';
                    // 给当前的class添加style="display:block"
                    aDiv[this.index].style.display = 'block';
                };
            }
        };
    </script>
</head>
<body>
<div id="div1">
    <input type="button" value="txt1" class="active" />
    <input type="button" value="txt2" />
    <input type="button" value="txt3" />
    <div style="display:block;">txt1content</div>
    <div>txt2content</div>
    <div>txt3content</div>
</div>
</body>
</html>

1.首先将函数内的嵌套函数都单独出来

<script>
    var aBtn = null;
    var aDiv = null;

    window.onload = function () {
        var oDiv = document.getElementById('container');
        aBtn = oDiv.getElementsByTagName('input');
        aDiv = oDiv.getElementsByTagName('div');
        var i = 0;

        for(i = 0; i < aBtn.length; i++) {
            aBtn[i].index = i;
            aBtn[i].onclick = tab;
        }
    };
        function tab() {
                for(i =0; i < aBtn.length; i++) {
                    aBtn[i].className = 'kin';
                    aDiv[i].style.display = 'none';
                }
                this.className = 'active';
                aDiv[this.index].style.display = 'block';
            };
</script>

 2.然后把window.onload改为构造函数

<script>
    var aBtn = null;
    var aDiv = null;

    window.onload = function() {
        var oTab = TabSwitch('container');
    }

    function TabSwitch(id) {
        var oDiv = document.getElementById(id);
        aBtn = oDiv.getElementsByTagName('input');
        aDiv = oDiv.getElementsByTagName('div');
        var i = 0;

        for(i = 0; i < aBtn.length; i++) {
            aBtn[i].index = i;
            aBtn[i].onclick = tab;
        }
    };
　　function tab() {
       for(i =0; i < aBtn.length; i++) {
       　　aBtn[i].className = 'kin';
          aDiv[i].style.display = 'none';
       }
       this.className = 'active';
       aDiv[this.index].style.display = 'block';
   };
</script>

 3.最后变量改为属性，函数改为方法

<script>
    window.onload = function() {
        var oTab = new TabSwitch('container');
    };

    function TabSwitch(id) {
        var oDiv = document.getElementById(id);
        this.aBtn = oDiv.getElementsByTagName('input');
        this.aDiv = oDiv.getElementsByTagName('div');
        var i = 0;
        var _this = this;

        for(i = 0; i < this.aBtn.length; i++) {
            this.aBtn[i].index = i;
            this.aBtn[i].onclick = function () {
                _this.tab(this);
            };
        }
    };
    TabSwitch.prototype.tab = function (oBtn) {
        for(i =0; i < this.aBtn.length; i++) {
            this.aBtn[i].className = 'kin';
            this.aDiv[i].style.display = 'none';
        }
        oBtn.className = 'active';
        this.aDiv[oBtn.index].style.display = 'block';
    };
    </script>

最终代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        #container .active {
            background-color: green;
        }
        #container .kin {
            background-color: red;
        }
        #container div {
            display: none;
            width: 300px;
            height: 300px;
            background-color: #ccc;
        }
    </style>

    <script>
    window.onload = function() {
        var oTab = new TabSwitch('container');
    };

    function TabSwitch(id) {
        var oDiv = document.getElementById(id);
        this.aBtn = oDiv.getElementsByTagName('input');
        this.aDiv = oDiv.getElementsByTagName('div');
        var i = 0;
        var _this = this;

        for(i = 0; i < this.aBtn.length; i++) {
            this.aBtn[i].index = i;
            this.aBtn[i].onclick = function () {
                _this.tab(this);
            };
        }
    };
    TabSwitch.prototype.tab = function (oBtn) {
        for(i =0; i < this.aBtn.length; i++) {
            this.aBtn[i].className = 'kin';
            this.aDiv[i].style.display = 'none';
        }
        oBtn.className = 'active';
        this.aDiv[oBtn.index].style.display = 'block';
    };
    </script>
</head>
<body>
    <div id="container">
        <input type="button" value="text1">
        <input type="button" value="text2">
        <input type="button" value="text3">
        <div style="display: block;">text1container</div>
        <div>text2container</div>
        <div>text3container</div>
    </div>
</body>
</html>

 

posted @ 2019-04-29 09:37  venkim  阅读(167)  评论(0)  编辑  收藏  举报