面向對象編程的思想

1.佈局

<div class="box" id="box">
    <p id="title"><span class="clicked">遊戲</span><span>旅行</span><span>音樂</span></p>
    <ul class="info" id="info">
        <li class="select">GTA5、孤島驚魂</li>
        <li>澳大利亞、西藏</li>
        <li>暗裏着迷、一生有你</li>
    </ul>
</div>

2.js

a.函數封裝

function P(a){
        var spans = document.getElementById(a).getElementsByTagName('span');
        var lis = document.getElementById(a).getElementsByTagName('li');
        for(var i=0;i<spans.length;i++){
            spans[i].index = i;
            spans[i].onclick = function (){
                for(var j=0;j<spans.length;j++){
                    spans[j].className='';
                    lis[j].className = "";
                }
                this.className='clicked';
                lis[this.index].className = "select"
            };
        }
    }

    P("box");

b.面向對象

function Tab(a){
    this.spans = document.getElementById(a).getElementsByTagName('span');
    this.lis = document.getElementById(a).getElementsByTagName('li');

    for(var i=0;i<this.spans.length;i++){
        this.spans[i].index = i;
        var _this = this;
        this.spans[i].onclick = function(){
            _this.clicked(this)
        }
    }
}

Tab.prototype.clicked = function(a){
    for(var j=0;j<this.spans.length;j++){
        this.spans[j].className = "";
        this.lis[j].className = "";
    }
    a.className ="clicked";
    this.lis[a.index].className = "select";

}
var p = new Tab("box");