CSS+JavaScript 实现TabPane页签

核心提示： tabPane.jsvarTabPaneConfig={idPrefix:"tab-panel-object-",idCounter:0,getId:function(){returnthis.idPrefix+this.idCounter++;},tabHeadId:

tabPane.js

varTabPaneConfig={
　　idPrefix:"tab-panel-object-",
　　idCounter:0,
　　getId:function(){returnthis.idPrefix+this.idCounter++;},
　　tabHeadId:"tabHead",
　　tabHeadClass:"tab-headtab-border",
　　tabBodyId:"tabBody",
　　tabBodyClass:"tab-border"
}
functionTabPane(id){
　　this.id=id;
　　this.height="100%";
　　this.width="100%";
　　this.tabPages=0;
　　this.head=null;
　　this.body=null;　　
}
TabPane.prototype.init=function(){　　
　　varr=document.getElementById(this.id);
　　if(!r.style.overflow)　　r.style.overflow="auto";
　　r.className="tab";
　　//createhead
　　vardiv=document.createElement("div");
　　div.id=TabPaneConfig.tabHeadId;
　　div.className=TabPaneConfig.tabHeadClass;
　　r.appendChild(div);
　　this.head=div;
　　varul=document.createElement("ul");
　　div.appendChild(ul);
　　//createbody
　　div=document.createElement("div");
　　div.id=TabPaneConfig.tabBodyId;
　　div.className=TabPaneConfig.tabBodyClass;
　　r.appendChild(div);　　
　　this.body=div;
}
TabPane.prototype.addTabPage=function(obj){
　　if(!document.getElementById(obj.panel))return;
　　if(!this.tabPages)　this.init();　　
　　this.head.firstChild.appendChild(this.createTabTitle(obj));
　　this.body.appendChild(document.getElementById(obj.panel));　　
　　this.tabPages++;
}
TabPane.prototype.createTabTitle=function(obj){
　　varli=document.createElement("li");
　　li.id=TabPaneConfig.getId();　　
　　li.data=obj.panel;
　　li.onclick=tabOnClick;
　　li.style.width=obj.width;
　　if(this.tabPages){
　　　　li.className="";
　　　　document.getElementById(obj.panel).style.display="none";　　
　　}else{
　　　　li.className="hover";
　　　　document.getElementById(obj.panel).style.display="block";　　
　　}
　　vartextNode=document.createTextNode(obj.title);
　　li.appendChild(textNode);
　　returnli;
}
functiontabOnClick(){　　
　varevent=window.event||arguments[0];
　varelement=event.srcElement||event.target;　
　　varliArr=element.parentNode.getElementsByTagName("li");
　　for(vari=0;i<liArr.length;i++){
　　　　liArr[i].className="";
　　　　document.getElementById(liArr[i].data).style.display="none";
　　}
　　element.className="hover";　　
　　document.getElementById(element.data).style.display="block";
}