經心思熟慮，發明一種更好的HTML結構，在實現上比原來好太多了。下面是其思路。
首先是結構層，HTML部分：
<ul id="first_tabs" class="mass_tabs">
<li class="section active">
<a href="javascript:void(0)" class="trigger">按鈕1</a>
<div class="panel">
面板1
</div>
</li>
<li class="section">
<a href="javascript:void(0)" class="trigger">按鈕2</a>
<div class="panel">
面板2
</div>
</li>
<li class="section">
<a href="javascript:void(0)" class="trigger">按鈕3</a>
<div class="panel">
面板3
</div>
</li>
<li class="section">
<a href="javascript:void(0)" class="trigger">按鈕4</a>
<div class="panel">
面板4
</div>
</li>
</ul>
當然現在看不出它是個tabs，我們使用CSS修整一下：
.mass_tabs {
position:relative;
height:200px;
width:400px;
list-style:none;
padding-left:20px;
padding-top:5px;
background:green;
overflow:hidden;
}
.mass_tabs .section {
float:left;
}
.mass_tabs .trigger {
display:inline-block;
height:20px;
line-height:20px;
padding:1px 10px;
margin-left:5px;
color:#000;
background:#00FF7F;
text-align:center;
text-decoration:none;
}
.mass_tabs .active .trigger{
padding-bottom:8px;/* panel.top - parent.padding-top - tigger.height */
color:#fff;
background:#a9ea00;
}
.mass_tabs .panel{
display: none;
position:absolute;
width:420px;/* parent.width+ parent.padding-left*/
height:175px;/* parent.height + padding-top - tabs.top */
top: 30px;
left:0px;
color:#000;
background:#a9ea00;
}
.mass_tabs .active .panel{
display:block;
}
最后是用JS綁定事件就行了，通常是點擊事件或mouseover事件。
// by 司徒正美
$.require("ready,event,attr",function(){
$("body").delegate("#first_tabs .trigger", "click", function(e){
var sec = $(e.target).parent();
if(!sec.hasClass("active")){
$("#first_tabs .active").removeClass("active");
sec.addClass("active");
}
});
});
這個結構的好處在於，利用CSS的繼承關系，實現用一個class來切換面板，在JS方面也不用使用index， eq等API了。另外，我們可以在上例中的“按鈕1”外面再包一層標簽，方便讓用更多CSS來裝飾它。
不過上面的代碼確實很難在JS文件中看到它是什么，因此我們把它封裝一下，改成如下調用：
// by 司徒正美
$.require("ready,more/tabs",function(){
$("#second_tabs").tabs({
active_event: "mouseover"
}).tabs("active",2)
})