網頁選項卡（很個性）

2024-09-05 12:19:24

字體：大中小

來源：轉載

供稿：網友

比較個性的網頁選項卡，一改方方正正的風格，換為這種菱形的樣式，看上去很生動，鼠標點擊后切換，而非滑動門，代碼段演示了在同一個網頁中調用兩個TAB選項卡，方便你的調用。

<!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><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(/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(/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   id="txgtnxo"   class="container">	<ul id="nav" class="convention_tab">		<li id="ebktkqw"    class="start_tab current_tab">全部內容</li>		<li>源碼更新</li>		<li>ASP源碼</li>		<li>PHP更新</li>		<li id="end_tab">VB更新</li>	</ul>	<div   class="xqvajek"   id="cardarea">		<div   id="vpuhqzf"   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 id="kwfsbzf"    class="start_tab current_tab">全部內容</li>		<li>使用方法</li>		<li>下載排行</li>		<li>源碼分類</li>		<li id="end_tab">最后一個</li>	</ul>	<div   class="inhjzbh"   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;"> <input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="這個必不可少" /> </span>即可完成事件添加,多個區域用豎線隔開。</p>			<div   id="cdqzbof"   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="這個必不可少" /><script type="text/javascript">function addLoadEvent(func) {  var oldonload = window.onload;  if (typeof window.onload != 'function') {    window.onload = func;  } else {    window.onload = function() {      oldonload();      func();    }  }}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].onclick=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].onfocus=function(){this.blur();}				}			}		}else{			whichToTriggerObj[i].onmouseover=function(){				//return 				return correspondingRegion(this,objArray,currentClassName,whichToTriggerObj);			}		}		whichToTriggerObj[i].onfocus=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);</script></body></html>

上一篇：CSS+js實現的后臺管理菜單

下一篇：帶陰影的CSS滑動門（絕對值得一看）