开发学院网页设计 JavaScript CSS+JavaScript 实现TabPane页签阅读

CSS+JavaScript 实现TabPane页签

　2010-09-14 13:37:10　来源：WEB开发网　闂傚倷绶氬ḿ褍螞閹绢喖绠柨鐕傛嫹

闂傚倷绀侀幉锟犲垂閻㈠灚宕查柟鎵閸庡秵銇勯幒鎴濃偓鐢稿磻閹炬枼妲堟繛鍡楃С濞岊亞绱撻崒姘扁枌闁瑰嚖鎷�

婵犵數濮幏鍐川椤撴繄鎹曢梻渚€娼уú銈吤洪妸鈺佺劦妞ゆ帊鑳堕埊鏇㈡煏閸モ晛浠х紒杈╁仱閺佹捇鏁撻敓锟�闂傚倷绶氬ḿ褍螞閹绢喖绠柨鐕傛嫹　　闂傚倷鑳舵灙缂佺粯顨呴埢宥夊即閵忕姵鐎梺缁樺姇閻忔氨鈧凹鍓熷娲垂椤曞懎鍓伴梺閫炲苯澧紒澶婄秺瀵濡歌閸嬫捇妫冨☉娆忔殘闂佷紮缍€娴滎剟鍩€椤掑倹鏆柛瀣躬瀹曚即寮借閺嗭箓鏌ㄩ悤鍌涘

核心提示： 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"; }