在現在的網頁中，選項卡（我自己這樣子叫）是非常普遍的，也是比較基礎，學了原型實現選項卡也挺久了，最近在學ES6，學了用類實現選項卡，今天就在此做個總結，別的廢話也不多說。

以“貌”說這貨

外貌——還好，長得挺帥

（自己理解的）選項卡：就是通過點擊頭部切換內容的貨。

怎麽得到這貨

html代碼

<div id="div1">
        <input type="button" value="出國" class="active">
        <input type="button" value="留學">
        <input type="button" value="旅遊">
        <div style=‘display: block‘>123</div>
        <div>456</div>
        <div>789</div>
    </div> 
 

css代碼

#div1 div{
            width: 200px;
            height: 200px;
            border: 1px solid #ccc;
            display: none;
        }
        .active {
            background: orange;
        }

js代碼

入門

window.onload=function ()
{
    var oDiv=document.getElementById(‘div1‘);
    var aBtn=oDiv.getElementsByTagName(‘input‘);
    var aDiv=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=‘‘;
                aDiv[i].style.display=‘none‘;
            }
            this.className=‘active‘;
            //alert(this.index);
            aDiv[this.index].style.display=‘block‘;
        };
    }
};
 

面向對象

 window.onload = function (){
                new tab(‘div1‘);
            }

用原型實現

function tab(id)
{
    var oDiv = document.getElementById(id);
    this.aBtn = oDiv.getElementsTagName(‘input‘);
    this.aDiv = oDiv.getElemetsTagName(‘div‘);

    var _this = this;
    for(var i=0;i<this.aBtn.length;i++){
        this.aBtn[i].index = i;
        this.aDiv[i].addEventListener(‘click‘,function(){
            _this.tabSwitch(this);
        },false)
    }
}

tab.prototype.tabSwitch = function (oBtn){
    for(var i=0;i<this.aBtn.length;i++)
    {
        this.aBtn[i].className = ‘‘;
        this.aDiv[i].style.display = ‘none‘;
    }
    oBtn.className = ‘avtive‘;
    this.aDiv[oBtn.index].style.display = ‘block‘;
}
 

用ES6引進的類class實現

class tab {
                constructor(id) {
                   var oDiv = document.getElementById(id);
                    this.aBtn = oDiv.getElementsByTagName(‘input‘);
                    this.aDiv = oDiv.getElementsByTagName(‘div‘);

                    var _this = this;
                    for (var i = 0; i < this.aBtn.length; i++) {
                        this.aBtn[i].index = i;
                        this.aBtn[i].addEventListener(‘click‘, function () {
                            _this.tabSwitch(this);
                        }, false)
                    } 
                }
                tabSwitch(oBtn) {
                    for (var i = 0; i < this.aBtn.length; i++) {
                        this.aBtn[i].className = ‘‘;
                        this.aDiv[i].style.display = ‘none‘;
                    }
                    oBtn.className = ‘active‘;
                    this.aDiv[oBtn.index].style.display = ‘block‘;
                }    
            }

關於面向對象（自己的理解）

1.何為對象？
對象，就是擁有屬性和方法的集合。
2.何為面向對象？
根據面向對象的三大特征：
多態：多種狀態；
封裝：把功能封裝成工具，不用過多的理會怎麽實現的，會使用就行；
繼承：跟css繼承性類似，繼承父的屬性和方法。
3.js裏的面對對象與Java中的面對對象的區別
js是基於原型的面對對象，而Java是類的面向對象
4.怎麽理解js裏的原型？
原型可以用css裏class去類似理解，就是一組元素通過原型實現相同屬性、方法的。

1. 用原型寫面向對象

   function User(name, pass)
   {
       this.name=name;
       this.pass=pass;
   };
   
   User.prototype.showName=function()
   {
       alert(this.name);
   }
   User.prototype.showPass=function(){
       alert(this.pass);
   }
   
   function VipUser(name, pass, level){
       User.call(this, name, pass);
   
       this.level = level;
   }
   VipUser.prototype=new User();
   VipUser.prototype.constructor=VipUser;
   /*for(var i in User.prototype)
   {
       VipUser[i].prototype = User[i].prototype;
   }*/
   VipUser.prototype.showLevel=function(){
       alert(this.level);
   };

   用類寫面向對象

   class person
   {
   constructor(name, age){
       this.name = name;
       this.age = age;
   }
   showName(){
       alert(this.name);
   }
   showAge(){
       alert(this.age);
   }
   }
   class vip extends person
   {
   constructor(name,age,sex) {
       super(name, age);
       this.sex = sex;
   }
   showSex(){
       alert(this.sex);
   }
   }

以選項卡的故事扯扯js面向對象