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

来源：互联网发布：战舰建模软件编辑：程序博客网时间：2024/05/16 14:16

我对面向对象的理解：
面向对象（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>

阅读全文

0 0