面向对象选项卡（回头写个简单的小案例）

发布: 2016-12-30 21:28:47标签: 前端开发

面向对象的理解： 面向对象（oop）是一种编程的思想，它的优点便于管理，代码可维护性好；方便继承；适合封装，重功能，不重过程。

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'>
        <title></title>
        <style type='text/css'>
            *{margin:0;padding:0;}
            .container{font-size:40px;}
            .container span.active{color:#f0f;}
            .container div{width:200px;height:200px;background:#f00;display:none;}
            .container div.active{display:block;}
        </style>
    </head>
    <body>
        <div class='container' id='container'>
            <p>
                <span class='active'>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
            </p>
            <div class='active'>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
    </body>
    <script type='text/javascript'>
        new TabSwitch('container');

        function TabSwitch(odiv){
            var that = this;

            this.container = document.getElementById(odiv);
            this.tabs = this.container.getElementsByTagName('span');
            this.views = this.container.getElementsByTagName('div');

            for(var i = 0;i < this.tabs.length;i++){
                this.tabs[i].index = i;
                this.tabs[i].onclick = function(){
                    that.fnClick(that,this)
                };
            }
        }

        TabSwitch.prototype.fnClick = function(that,_this){
            var _len = that.tabs.length;
            for(var i = 0;i < _len;i++){

                that.tabs[i].removeAttribute('class');
                that.views[i].removeAttribute('class')
            }
            _this.className = 'active';
            that.views[_this.index].className = 'active';
            console.log(_this.index)
        }
    </script>
</html>