面向对象及组件开发（七）传统选项卡和面向对象选项卡编写

最新推荐文章于 2024-03-21 16:47:39 发布

杭州-前端-求内推

最新推荐文章于 2024-03-21 16:47:39 发布

阅读量285

点赞数

分类专栏： ➽【面向对象及组件开发】文章标签： JS面向对象 JS组件开发传统选项卡面向对象选项卡

本文链接：https://blog.csdn.net/ansenamerson/article/details/72626902

版权

➽【面向对象及组件开发】专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.传统方式编写选项卡

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{margin: 0;padding: 0}
        #box{
            height: 100px;
            width: 250px;
            margin: 50px auto;
        }
        #box input[type=button]{
            width: 20px;
            height: 20px;
        }

        #box .backcolor{
            background-color: red;
        }
        #container{
            width: 250px;
            height: 100px;
        }

        #container div{
            width: 250px;
            height: 100px;
            border: 1px solid;
            position: absolute;
            display: none;
        }

        #container .active{
            display: block;
        }
    </style>
</head>
<body>
<div id="box">
    <input type="button" value="1" class="backcolor">
    <input type="button" value="2">
    <input type="button" value="3">
    <div id="container">
        <div class="active">111</div>
        <div>222</div>
        <div>333</div>
    </div>
</div>

<script type="text/javascript">

    var aBtn = document.getElementsByTagName('input');
    var oDiv = document.getElementById('container');
    var aCon = oDiv.getElementsByTagName('div');

    for(var i=0; i<aBtn.length; i++){
        aBtn[i].index = i;

        aBtn[i].onclick = function(){

            for(var i=0; i<aBtn.length; i++){
                aBtn[i].className = '';
                aCon[i].style.display = 'none';
            }

            this.className = 'backcolor';
            aCon[this.index].style.display = 'block';

        }
    }
</script>
</body>
</html>

效果展示

2.传统选项卡的变形

<script type="text/javascript">
    /**
     * 变形方法:
     *   尽量不要出现函数嵌套
     *   可以有全局变量
     *   把 onload 中不是赋值的语句放到单独的函数中
     */

     //全局变量
    var aBtn = null;
    var oDiv = null;
    var aCon = null;

    window.onload = function(){
        aBtn = document.getElementsByTagName('input');
        oDiv = document.getElementById('container');
        aCon = oDiv.getElementsByTagName('div');

        init();
    }

    function init(){
        for(var i=0; i<aBtn.length; i++){
            aBtn[i].index = i;
            aBtn[i].onclick = change;
        }
    }

    function change(){
        for(var i=0; i<aBtn.length; i++){
            aBtn[i].className = '';
            aCon[i].style.display = 'none';
        }

        this.className = 'backcolor';
        aCon[this.index].style.display = 'block';
    }

</script

效果展示

3.用面向对象封装传统选项卡

<script type="text/javascript">
        /**
         * 改成面向对象
         *   全局变量就是属性
         *   函数就是方法
         *   onload中创建对象
         *   改this指向问题-->面向对象都是关于"对象"的
         */

    var aBtn = null;
    var oDiv = null;
    var aCon = null;

    function Tab(){
        //全局变量就是属性,是对象的属性,这个时候对象就是 this 
        this.aBtn = document.getElementsByTagName('input');
        this.oDiv = document.getElementById('container');
        this.aCon = this.oDiv.getElementsByTagName('div');
    }

    Tab.prototype = {
        //函数就是方法
        init : function(){
            var This = this;
            for(var i=0; i<this.aBtn.length; i++){
                this.aBtn[i].index = i;
                this.aBtn[i].onclick = function(){
                    //'This' is obj,'this' is aBtn
                    This.change(this);
                }
            }
        },

        change : function(obj){
            //尽量让面向对象中的 this 指向对象
            for(var i=0; i<this.aBtn.length; i++){
                this.aBtn[i].className = '';
                this.aCon[i].style.display = 'none';
            }

            obj.className = 'backcolor';
            this.aCon[obj.index].style.display = 'block';
        }

    }

    var t1 = new Tab();
    t1.init();

</script>