选项卡效果在AJAX刚兴起的时候被不少网站应用在首页上，在有限的空间里容纳更多的内容。这个东西写法不少，其实原理很简单，就是层的显隐与样式替换。

我使用Prototype.js也写了一个可定义性高，易扩展，却非常简洁的代码。

我这里所写的选项卡并没有应用AJAX，只是一个最简单的Tab显示应用。结构层，表现层，行为层完全分离。前台结构也很简单，只使用一个ID。

最终效果：http://www.kxbd.com/mylab/080420tab/

以下是HTML代码：【运行代码】【复制代码】 <div id="weekRank">
<div class="boxHead">
<ul>
<li class="current">周点击</li>
<li>周IP</li>
<li>周回复</li>
</ul>
</div>
<div class="boxBody">
<div>
<ul>
<li><a href="#">AAAAAAAAAA</a></li>
<li><a href="#">mouseover事件触发</a></li>
<li><a href="#">mouseover event</a></li>
</ul>
</div>
<div style="display:none;">
<ul>
<li><a href="#">BBBBBBBBBB</a></li>
<li><a href="#">mouseover事件触发</a></li>
<li><a href="#">mouseover event</a></li>
</ul>
</div>
<div style="display:none;">
<ul>
<li><a href="#">CCCCCCCCCC</a></li>
<li><a href="#">mouseover事件触发</a></li>
<li><a href="#">mouseover event</a></li>
</ul>
</div>
</div>
<div class="boxFoot"></div>
</div> 以下是Javascript代码：【复制代码】 var homeTab=Class.create();
homeTab.prototype = {
initialize:function(id,currentCss,mouseEvent){
this.id = id;
this.currentCss = currentCss;
this.mouseEvent = mouseEvent;
this.init();
},

init:function(){
if($(this.id)){
$(this.id).down(1).childElements().each(function(s,index){//事件绑定
s.observe(this.mouseEvent, this._changeTab.bindAsEventListener(this,index));
}.bind(this));
}
},

_changeTab:function(e){//事件监听,改变标题样式和显示隐藏相应层
var el =e.element();
var cssN = this.currentCss;
if (!el.hasClassName(cssN)){
el.addClassName(cssN).siblings().each(function(s){
s.removeClassName(cssN);
});
el.up(1).next().childElements()[$A(arguments).pop()].show().siblings().each(function(s){
s.hide();
});
};
}
}
document.observe("dom:loaded",function(){
var homeTab_weekRank = new homeTab("weekRank","current","mouseover");
var homeTab_loginRecent = new homeTab("loginRecent","current1","mouseover");
var homeTab_hotGroup = new homeTab("hotGroup","current","click");
var homeTab_Test = new homeTab("test","current","mouseover");
});
以下是CSS代码：【复制代码】 .boxHead {
background: #f15502;
border-bottom: 2px solid #b84000;
}
.boxHead ul {height:26px;}
.boxHead li {
float: left;
width: 78px;
height: 26px;
line-height: 26px;
font-size: 12px;
color: #FFF;
text-align: center;
cursor: pointer;
}

.boxHead li.current {
background: #b84000;
font-size: 12px;
}
.boxHead li.current1 {
background: #333;
font-size: 12px;
}
.boxHead h2 {
width: 78px;
height: 26px;
line-height: 26px;
font-size: 12px;
color: #FFF;
text-align: center;
}
.boxHead h2.current {
background: #b84000;
font-size: 12px;
}
.boxBody {
padding: 6px;
border: 1px solid #f27d00;
border-top: 0px;
}

#hotList { width:270px; }
#hotList .boxHead { }
#hotList .boxBody { background: #fbccb3;text-align:left; } 从上面的示例代码可以看出，事件与样式可随意定义，而结构层内容块可以随意添加，无须再使用ID，非常方便。