用过一段时间prototype.js库，该库灵活小巧，使用该js库，自己又开发了一些插件，共享给大家使用：
/**************************************************************************
* the file encoding:GBK
* Created by tz@2008-3-3 20:26
**************************************************************************/
Cs={};
Cs.flower={};
Cs.flower.TabSet = Class.create();
if (!Cs.flower.TabSets) { Cs.flower.TabSets = []; }
Object.extend(Cs.flower.TabSet.prototype , {
headElmId: "",
captions: [],
tabs:[],
activeIdx:0,
initialize:function(headElmId){
if ($(headElmId+"_tabs")) //兼容原来的js类TabSet
this.headNamesId = headElmId+"_tabs";
else if ($(headElmId))
this.headNamesId = headElmId;
else new Error("调用出错!");
this._id = Cs.flower.TabSets.length;
Cs.flower.TabSets[this._id]=this;
this.captions=[];
this.tabs=[];
this.activeIdx=0;
},
addTab: function(caption, tab){
this.captions[this.captions.length] = caption;
this.tabs[this.tabs.length] = tab;
},
draw: function(){
var content = new Array;
content[content.length]="<div class=\"c_content\"><div class=\"c_tab e_clearfix\"><ul>";
for(var i=0; i<this.tabs.length; i++){
if (i==this.activeIdx){
content[content.length]="<li class=\"current\" ";
}
else{
content[content.length]="<li "
this.tabs[i].style.display = "none";
}
content[content.length]="style=\"cursor:hand\" onclick=\"Cs.flower.TabSets["+this._id+"].switchTo("+i+")\">";
//content[content.length]="<a href=\"javascript:void(0)\" onfocus=\"this.blur()\">";
//add by zhoucs 2011.8.17 start
content[content.length]="<a href=\"javascript:void(0)\" onfocus=\"Cs.flower.TabSets["+this._id+"].switchTo("+i+")\">";
//add by zhoucs 2011.8.17 end
content[content.length]=this.captions[i];
content[content.length]="</a></li>";
}
content[content.length]="</ul></div></div>";
$(this.headNamesId).innerHTML = content.join("");
},
switchTo:function(index){
if (index == this.activeIdx) return;
$(this.headNamesId).down("li.current").removeClassName("current");
this.tabs[this.activeIdx].style.display = "none";
if (typeof this.tabs[this.activeIdx].onBlur != "undefined"){
if (typeof this.tabs[this.activeIdx].onBlur == "string")
(Function(this.tabs[this.activeIdx].onBlur).bind(this.tabs[this.activeIdx]))();
else
this.tabs[this.activeIdx].onBlur.bind(this.tabs[this.activeIdx])();
}
this.activeIdx = index;
$(this.headNamesId).down("ul").down("li", this.activeIdx).addClassName("current");
this.tabs[this.activeIdx].style.display = "block";
if (typeof this.tabs[this.activeIdx].onFocus != "undefined"){
if (typeof this.tabs[this.activeIdx].onFocus == "string")
(Function(this.tabs[this.activeIdx].onFocus).bind(this.tabs[this.activeIdx]))();
else
this.tabs[this.activeIdx].onFocus.bind(this.tabs[this.activeIdx])();
}
if (typeof this._onTabSelectEvent != "undefined"){
if (typeof this._onTabSelectEvent == "string")
(Function(this._onTabSelectEvent).bind(this.tabs[this.activeIdx]))();
else
this._onTabSelectEvent.bind(this.tabs[this.activeIdx])();
}
},
onTabSelect: function(yourEvent){
this._onTabSelectEvent = yourEvent;
},
getActiveTab: function(){
return this.tabs[this.activeIdx];
},
getActiveIdx: function(){
return this.activeIdx;
},
hide: function(index){
$(this.headNamesId).down("ul").down("li", index).style.display = "none";
this.tabs[index].style.display = "none";
},
show: function(index){
$(this.headNamesId).down("ul").down("li", index).style.display = "block";
this.tabs[index].style.display = "block";
},
visible: function(index){
return this.tabs[index].style.display != "none";
},
toggle: function(index){
if (this.visible(index))
this.hide(index)
else
this.show(index);
}
});
使用方法：
html:
<div class="c_content">
<div id="tabset"></div>
<div>
<!-- 客户基本信息 -->
<div id="basecustinfo">
........
........
</div>
<!-- 客户详细信息 -->
<div id="detailcustinfo">
........
........
</div>
</div>js:
tabset = new Cs.flower.TabSet("tabset");
tabset.addTab("客户基本信息", $("basecustinfo"));
tabset.addTab("客户详细信息", $("detailcustinfo"));
tabset.draw();
其中的css式样：
/*-------------------查询外框---------------------*/
.c_content{line-height:25px; color:#000;width: 100%;}
.c_content .mid{ margin:auto; text-align:center;
}
.c_content .mid table{
width:500px;
background-color: #f5f5f5;
border: 1px solid #CCCCCC;
}
.c_content .e_title{ line-height:24px; font-size:12px;background-color:#F5F5F5; border-bottom:1px solid; border-color:#ECECEC; border-top:1px solid #ECECEC;}
.c_content table{width: 100%;}
.c_content td{ border-bottom:1px solid; border-color:#EAEAEA; line-height:20px; padding:2px; text-align:left;}
.c_content .info{color:#0FB0FF}
.c_content .blank{ padding:8px; width:100%;}
.c_content .infoLable{ font-weight:bold; color:#000000; text-align:right;}
/*清除浮动*/
.e_clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;}
.e_clearfix { display:inline-block;}
.e_clearfix { display:block;}
/*-------------------tab---------------------*/
.c_tab{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #D71920;
margin-top:2px;
}
.c_tab ul{ margin:0px; padding:0px; list-style:none; margin-left:8px;}
.c_tab li { float:left; margin:0px; padding:0 0 0 9px; background-image:url(../images/tab_r1_c1.gif); background-position:top left; background-repeat:no-repeat; height:29px;margin-right:1px; line-height:29px;white-space:nowrap;
}
.c_tab a {display:block; background-image:url(../images/tab_r1_c3.gif); background-position:right top; background-repeat:no-repeat; height:27px; padding:0px 12px 0px 6px; color:#555; font-weight:bold; float:left; text-decoration:none; }
.c_tab a:hover{ color:#d71902;}
.c_tab .current {background-image:url(../images/tab_active_r1_c1.gif); color:#FFF;}
.c_tab .current a{ background-image:url(../images/tab_active_r1_c3.gif); color:#FFF;}
c_tab .line{ width:100%; color:#D71920; background:url(../images/missionInfo_bg.gif) repeat-x left top;border-bottom:1px solid #DCDCDC;border-top:2px solid #D71920; height:10px;}
/*-------------------------------------------------*/
涉及到的四个图片：
tab_r1_c1.gif tab_r1_c3.gif：
tab_active_r1_c1.gif/tab_active_r1_c3.gif:
missionInfo_bg.gif:
