面向对象的选项卡

我也不知道一个简单的选项卡，为什么要挂上面向对象那么高大上的东西。

不过无所谓了。既然有那就说一说我理解的面向对象的选项卡吧。

 

我首先把对象的创建放在了windou.onload里面，在通过创建两个全局变量进行传递获取的标签，

然后保存this，通过保存后的this把解决this指向问题，然后就是基本的选项卡内容了。其实还是很简单的，对吧。

只要你了解函数三个对象之一的prototype，并知道怎么使用的，就解决了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象的选项卡</title>
    <style>
        .box{display:none;}
    </style>
</head>
<body>
<input type="button" value="小白">
<input type="button" value="小红">
<input type="button" value="小黑">
<div class="box" style="display:block;">今年19</div>
<div class="box">今年20</div>
<div class="box">今年21</div>
<script type="text/javascript">
    window.onload = function () {
        var Main = new Person();
    };
    var oBtn = null,
        oDiv = null;
//    创建两个全局变量，让后面的prototype对象使用
    function Person(){
        this.oBtn = document.getElementsByTagName('input');
        this.oDiv = document.getElementsByClassName('box');
        //转换成全局变量
        var _this = this;
        //将这里的对象this存入_this中，方便在prototype对象中使用。
        for(var i=0;i<this.oBtn.length;i++){
            this.oBtn[i].index = i;
            this.oBtn[i].onclick = function () {
                _this.age(this);
                //这里的this指的是我们获取的input。_this值的是谁调用的Person.prototype；
            }
        }
    }
    Person.prototype.age = function (oBtn){
        // 利用prototype方法，把函数转换为对象
        for(var i=0;i<this.oBtn.length;i++){
            this.oBtn[i].className = '';
            this.oDiv[i].style.display = 'none';
        }
        oBtn.className = 'btn';
        this.oDiv[oBtn.index].style.display = 'block';
//        基本的选项卡内容
    }
</script>
</body>
</html>

最后，就是请其各路大神进行指教，并点出不足之处了。

 

posted @ 2017-11-19 16:45  旷达  阅读(171)  评论(0)  编辑  收藏  举报