比較個性的網頁選項卡，一改方方正正的風格，換爲這種菱形的樣式，看上去很生動，鼠標點擊後切換，而非滑動門，代碼段演示了在同一個網頁中調用兩個TAB選項卡，方便你的調用。
<textarea cols="50" rows="15" name="code" class="xhtml"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>選項卡</title> <mce:style type="text/css"><!-- body{font-size:12px;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:12px auto 0 auto;width:600px;} h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd,ul,ol{margin:0;padding:0;font-size:100%;} ul{list-style:none;} a{text-decoration:none;} .display_none{display:none;} /*選項卡的樣式*/ .convention_tab{clear:both;width:100%;float:left;margin:15px 0 0 0;background:url(http://codefans.net/jscss/demoimg/200903/switch_area.gif) left bottom repeat-x;padding-bottom:3px;overflow:hidden;padding-right:0px;}/*如果下面的區域是table，那麼padding-right:2px;*/ .convention_tab li{float:left;background:url(http://codefans.net/jscss/demoimg/200903/switch_area.gif) right top no-repeat;margin-left:-12px;padding:0 30px 0 11px;} .convention_tab li a,.convention_tab li.normal_tab b{color:#fff;display:block;height:19px;float:left; background:#3C6084;padding-top:3px;} .convention_tab li.current_tab{background-position:right -100px;border-left:solid 2px #fff; padding-bottom:2px;} .convention_tab li.current_tab a{background-color:#98B1C5;color:#000;} .convention_tab li.start_tab{margin-left:0;padding-left:0;border-left:none;} .convention_tab li.start_tab a{padding-left:10px;} .convention_tab li#end_tab{background-position:right -50px;} .convention_tab li#end_tab a{padding-left:10px;} .convention_tab li.current_tab#end_tab{background-position:right -140px;} .convention_tab li.current_tab#end_tab a{background-color:#98B1C5;} /*每個item*/ #cardarea,#cardarea2{border:solid 1px #3D5F85;clear:both;border-top:none;} #cardarea p,#cardarea2 p{padding:20px;text-align:left;line-height:23px;} #cardarea2 dl{text-align:left;padding:20px;line-height:23px;} --></mce:style><style type="text/css" mce_bogus="1">body{font-size:12px;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:12px auto 0 auto;width:600px;} h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd,ul,ol{margin:0;padding:0;font-size:100%;} ul{list-style:none;} a{text-decoration:none;} .display_none{display:none;} /*選項卡的樣式*/ .convention_tab{clear:both;width:100%;float:left;margin:15px 0 0 0;background:url(http://codefans.net/jscss/demoimg/200903/switch_area.gif) left bottom repeat-x;padding-bottom:3px;overflow:hidden;padding-right:0px;}/*如果下面的區域是table，那麼padding-right:2px;*/ .convention_tab li{float:left;background:url(http://codefans.net/jscss/demoimg/200903/switch_area.gif) right top no-repeat;margin-left:-12px;padding:0 30px 0 11px;} .convention_tab li a,.convention_tab li.normal_tab b{color:#fff;display:block;height:19px;float:left; background:#3C6084;padding-top:3px;} .convention_tab li.current_tab{background-position:right -100px;border-left:solid 2px #fff; padding-bottom:2px;} .convention_tab li.current_tab a{background-color:#98B1C5;color:#000;} .convention_tab li.start_tab{margin-left:0;padding-left:0;border-left:none;} .convention_tab li.start_tab a{padding-left:10px;} .convention_tab li#end_tab{background-position:right -50px;} .convention_tab li#end_tab a{padding-left:10px;} .convention_tab li.current_tab#end_tab{background-position:right -140px;} .convention_tab li.current_tab#end_tab a{background-color:#98B1C5;} /*每個item*/ #cardarea,#cardarea2{border:solid 1px #3D5F85;clear:both;border-top:none;} #cardarea p,#cardarea2 p{padding:20px;text-align:left;line-height:23px;} #cardarea2 dl{text-align:left;padding:20px;line-height:23px;}</style> </head> <body> <div class="container"> <ul id="nav" class="convention_tab"> <li class="start_tab current_tab"><a href="#" mce_href="#">CodeFans.net</a></li> <li><a href="#" mce_href="#">源碼更新</a></li> <li><a href="#" mce_href="#">ASP源碼</a></li> <li><a href="#" mce_href="#">PHP更新</a></li> <li id="end_tab"><a href="#" mce_href="#">VB更新</a></li> </ul> <div id="cardarea"> <div class="item"><p>這裏是div中的p標籤，因爲沒有指定class爲item，所以我不參與切換。</p></div> <p class="item display_none">我在頁面加載完成後才添加的事件，可有的圖片加載很慢，所以有時候可以把外部js中的addLoadEvent(getConfigInputObj);刪除掉，然後直接書寫 getConfigInputObj();當然要放在</html>以保證xhtml已經加載完畢</p> <p class="item display_none">看網上演示Jquery的tab插件更加強大，不過我這個更爲實用，o(∩_∩)o...。</p> <p class="item display_none">PHP更新的內容</p> <p class="item display_none">VB更新的內容</p> </div> <ul id="nav2" class="convention_tab"> <li class="start_tab current_tab"><a href="/" mce_href="">源碼愛好者</a></li> <li><a href="#" mce_href="#">使用方法</a></li> <li><a href="#" mce_href="#">下載排行</a></li> <li><a href="#" mce_href="#">源碼分類</a></li> <li id="end_tab"><a href="#" mce_href="#">最後一個</a></li> </ul> <div id="cardarea2"> <p class="item">重用性極高,在IE6+,Firefox2+,Opera9中均能正常工作，且並沒有使用hack。</p> <p class="item display_none"> <span style="font-family:Georgia, 'Times New Roman', Times, serif;" mce_style="font-family:Georgia, 'Times New Roman', Times, serif;"> <input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="這個必不可少" /> </span>即可完成事件添加,多個區域用豎線隔開。</p> <div class="item display_none"> <dl> <dt>id爲kp_OtherRegional的input元素共有5個參數</dt> <dd>第一個:表示id爲nav的那個元素。</dd> <dd>第二個:獲取到第一步的元素，遍歷指定的元素，這取決於你寫的什麼標籤，寫的li它就會遍歷li。</dd> <dd>第三個:切換區域的父容器,切換區域的父容器ID</dd> <dd>第四個:<p class="item",這裏沒有限定是什麼元素，而是限定帶有指定class的才能參與切換。</dd> <dd>第五個:切換標籤後當前標籤的樣式名。</dd> </dl> </div> <p class="item display_none">這裏是第四個區域</p> <p class="item display_none">第五個</p> </div> </div> <input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="這個必不可少" /> <mce:script type="text/javascript"><!-- /*addLoadEvent.js*/ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } /*addLoadEvent.js結束*/ /*switch_display_area.js*/ function getConfigInputObj(){ if(!document.getElementById || !document.getElementsByTagName)return; var configObj=document.getElementById("kp_OtherRegional");if(configObj==null)return; var configValue=configObj.getAttribute("value").replace(//s/g,""); var configArray=configValue.split("|") var length=configArray.length; var childConfigArray=null; var childConfigValue=""; for(var i=0;i<length;i++){ childConfigArray=configArray[i].split(","); giveEvent(childConfigArray); } //destroy(getConfigInputObj); } function giveEvent(obj){ if(obj==null){return;} var parentId=obj[0]; var whichToTrigger=obj[1]; var itemParent=obj[2]; var itemClass=obj[3]; var currentClassName=obj[4]; var listerEvent=obj[5]; if(!parentId || !whichToTrigger || !itemParent || !itemClass)return; var parentObj=null; var whichToTriggerObj=null; var itemParentObj=null; var itemObj=null; /*準備好各個元素*/ parentObj=document.getElementById(parentId); if(!parentObj){return;} itemParentObj=document.getElementById(itemParent); whichToTriggerObj=parentObj.getElementsByTagName(whichToTrigger);//獲取事件源對象的集合 if(!parentObj || !itemParentObj || !whichToTriggerObj)return; itemObj=itemParentObj.getElementsByTagName("*"); var length=itemObj.length; var objArray=new Array(); for(var i=0;i<itemObj.length;i++){ if(itemObj[i].className.indexOf(itemClass)>-1){ objArray.push(itemObj[i]); } } var whichToTriggerObjLength=whichToTriggerObj.length;//獲取事件源對象的長度 var isExistAObj=null; for(var i=0;i<whichToTriggerObjLength;i++){ whichToTriggerObj[i].setAttribute("oldClassName",whichToTriggerObj[i].className.replace(currentClassName)); whichToTriggerObj[i].setAttribute("currentNum",i); if(listerEvent==null){ whichToTriggerObj[i].οnclick=function(){ //return return correspondingRegion(this,objArray,currentClassName,whichToTriggerObj); } isExistAObj=whichToTriggerObj[i].getElementsByTagName("a"); if(isExistAObj.length>0){ for(var j=0;j<isExistAObj.length;j++){ isExistAObj[j].οnfοcus=function(){this.blur();} } } }else{ whichToTriggerObj[i].οnmοuseοver=function(){ //return return correspondingRegion(this,objArray,currentClassName,whichToTriggerObj); } } whichToTriggerObj[i].οnfοcus=function(){ this.blur(); } } //destroy(giveEvent); } //功能; 根據傳遞的參數切換（顯示或隱藏）各個區域 function correspondingRegion(obj,objArray,currentClassName,whichToTriggerObj){ var length=objArray.length; var currentNum=parseInt(obj.getAttribute("currentNum"),10); if(!objArray[currentNum]){ /*alert("該div不存在");*/ return; }else{ /*先將所有樣式 “歸零”*/ for(var i=0;i<length;i++){ objArray[i].style.display="none"; if(whichToTriggerObj[i]==null){continue;} //如果有老的樣式 if(whichToTriggerObj[i].getAttribute("oldClassName")!="" && whichToTriggerObj[i].getAttribute("oldClassName").indexOf(currentClassName)<0){ whichToTriggerObj[i].className=whichToTriggerObj[i].getAttribute("oldClassName"); }else if(whichToTriggerObj[i].getAttribute("oldClassName")!=""){ whichToTriggerObj[i].className=whichToTriggerObj[i].getAttribute("oldClassName"); }else{ whichToTriggerObj[i].className=""; } } //然後單獨給當前對象加上className if(objArray[currentNum]!=null){ objArray[currentNum].style.display="block"; if(obj.getAttribute("oldClassName")!=""){ obj.className=currentClassName+" "+obj.getAttribute("oldClassName"); }else{ obj.className=currentClassName; } //return false; }else{ //return true; } return false; } } addLoadEvent(getConfigInputObj); /*switch_display_area.js結束*/ // --></mce:script> </body> </html></textarea>
