<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>
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");