口號大全團隊口號個性簽名藝術簽名經典古詩古詩大全成語故事成語大全漢語詞典字典詞典成語查詢四字成語成語經典成語解釋成語用法

tab 頁分層顯示效果

模仿妳的圖片，***需要三個文件，壹個HTML，兩個JS，妳復制後，在demo.html旁邊新建壹個scripts文件夾，把兩個JS拷進去。不知道妳為什麽壹定要帖出來？太長...

demo.html

-------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Tab頁嵌套</title>

/*

選項卡

----------------------------------------------------------------

*/

body{font-size:12px;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:12px auto 0 auto;width:600px;position:relative;}

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;color:#000;}

.display_none{display:none;}

.container{clear:both; width:100%;float:left;}

/*選項卡的樣式*/

.convention_tab{width:100%;text-align:left;float:left;}

.convention_tab li{margin:0;padding:0;float:left;padding-right:10px;position:relative;z-index:2;bottom:-1px;}

.convention_tab li a{background:#eee;height:28px;line-height:28px;overflow:hidden;float:left;padding:0 8px;border:solid 1px #444;border-bottom:none;}

.convention_tab li.important a,.convention_tab li.important a:hover{background:#777;color:#fff;}

.convention_tab li a:hover{background:#e0e0e0;color:#000;}

/*選中後的樣式*/

.convention_tab li.current_tab a,.convention_tab li.current_tab a:hover{background:#999;color:#fff;padding-top:1px;}

/*單獨設置第二個tab的某些樣式*/

#nav2 li.current_tab a,#nav2 li.current_tab a:hover{background:#ffffe1;color:#000;}

/*第2層*/

#childArea{border:solid 1px #f60;clear:both;}

#child_tab li a{background:#ffaaaa;border:solid 1px #a00;}

#child_tab li.current_tab a,#child_tab li .current_tab a:hover{border:solid 1px red;border-bottom:none;background:#f20;}

/*第三層*/

#childArea2{clear:both;border:solid 1px #0a0;}

#child_tab2 li a{border:solid 1px #0a0;background:#f6fff6;}

#child_tab2 li.current_tab a,#child_tab2 li .current_tab a:hover{border:solid 1px #0a0;border-bottom:none;background:#0a0;}

/*其它*/

#cardarea,#cardarea2{border:solid 1px #666;text-align:left;clear:both;}

#cardarea p,#cardarea2 p,#cardarea2 dl{padding:20px;line-height:23px;}

#nav2{margin-top:18px;}

</style>

</head>

<body>

<h1 style="font-size:120%;text-align:left;margin:20px;">註意：如果是嵌套關系，那麽配置域中對應的第4個參數不能相同，如果兩個tab不存在嵌套關系，那麽就無所謂。</h1>

<li class="important"><a href="#">嵌套子選項卡</a></li>

</ul>

<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>

<li><a href="#">嵌套子選項卡003</a></li>

</ul>

</ul>

</div>

</body>

</html>

2.addLoadEvent.js

function addLoadEvent(func) {

var oldonload = window.onload;

if (typeof window.onload != 'function') {

window.onload = func;

} else {

window.onload = function() {

oldonload();

func();

}

3.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].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);