写了一个jquery tabs插件，使用事件代理处理事件。
结构层是群里深度讨论得出的最好的结构。
<dl id="aaa">
<dt><a>切换卡1</a><a>切换卡2</a><a>切换卡3</a></dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
</dl>
| selector | 字符串 | 必须，容器的CSS选择符，最好符合我上面给出的结构，为一个dl元素。 |
|---|---|---|
| tabsSelector | 字符串 | 可选，切换卡的通用选择符，最好符合我上面给出的结构，为dt元素下的一个a元素。 |
| panelsSelector | 字符串 | 可选，切换卡的通用选择符，最好符合我上面给出的结构，为一个dd元素。 |
| selected | 数字 | 可选，默认选择中的切换卡的索引值。 |
| select | 函数 | 可选，用于主动式触发事件。 |
| click | 函数 | 可选，用于被动式触发事件。 | remove | 函数 | 可选，移除某个切换卡与对应的面板。 |
<!doctype html>
<html>
<head>
<title>$.tabs</title>
<style>
.dom_tabs_selected {
background: #6363c1;
}
</style>
<script src="javascripts/jquery.js"></script>
<script>
$(function(){
$.tabs = function(obj){
return (this instanceof $.tabs) ? this.init.apply(this,arguments) : new $.tabs(obj)
}
//主动事件 通过编程触发
//被动事件 由用户的行为触发
$.tabs.prototype = {
init:function(obj){
var that = this;
//配置属性
$.extend(this,{
selectedClass:"dom_tabs_selected",
tabsSelector:">dt a",
panelsSelector:">dd",
click:$.noop,
selected:0
}, obj || { })
this.ui = $(obj.selector);
this.tabs = this.ui.find(this.tabsSelector);
this.panels = this.ui.find(this.panelsSelector);
this.select(this.selected)
this.tabs.live("click",function(){
var index = that.tabs.index(this);
that._switch.call(that,index)
that.click.call(this,index,that);
});
},
_switch:function(index){
this.tabs.removeClass(this.selectedClass).eq(index).addClass(this.selectedClass);
this.panels.hide().eq(index).show();
},
select:function(index,callback){
index = ~~index;
this._switch(index);
callback && callback.call(this.tabs[index],index,this);
},
remove:function(index,callback){
index = ~~index;
this.tabs.eq(index).remove();
this.panels.eq(index).remove();
callback && callback.call(this.tabs[index],index,this);
}
}
var tabs = $.tabs({
selector:"#aaa",
selected:1,
click:function(index,instance){
alert(index+" | "+this.tagName+" | "+instance.panels.eq(index).text())
}
});
});
</script>
</head>
<body>
<dl id="aaa">
<dt><a>切换卡1</a><a>切换卡2</a><a>切换卡3</a></dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
</dl>
</body>
</html>