表現、結構、行為分離的選項卡效果

2019-11-21 01:49:28

字體：大中小

來源：轉載

供稿：網友

從大學開始就一直對ＪＳ很感興趣，可是卻很少實際操作，今天練練，試寫一個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>m.survivalescaperooms.com表現、結構、行為分離的選項卡效果 武林網</title> <script language="javascript">     window.onload=resetTab;     function getTabTitle(tab) {         var childNodesList=tab.childNodes;         var titleNodes=new Array();         var j=0;         var i;         for (i=0;i<childNodesList.length;i++) {             if(childNodesList[i].nodeName=="H1") {                 titleNodes[j]=childNodesList[i];                 j++;             }         }         return titleNodes;     }     function getTabContent(tab) {         var childNodesList=tab.childNodes;         var tabContent=new Array();         var j=0;         var i;         for (i=0;i<childNodesList.length;i++) {             if(childNodesList[i].nodeName=="DIV") {                 tabContent[j]=childNodesList[i];                 j++;             }         }         return tabContent;     }     function resetTab() {         var allDiv=document.getElementsByTagName("div");         var tab=new Array();         var j=0;         var i;         for (i=0;i<allDiv.length;i++) {             if(allDiv[i].className=="tabs") {                 tab[j]=allDiv[i];                 j++;             }         }         var tabTitle,tabContent;         for(i=0;i<tab.length;i++) {             tabTitle=getTabTitle(tab[i]);             tabTitle[0].className="selectTab";             tabContent=getTabContent(tab[i]);             tabContent[0].className="selectContent";             for (j=1;j<tabTitle.length;j++) {                 tabTitle[j].className="unselectTab";                 tabContent[j].className="unselectContent";             }         }     }     function changTab(tab) {         var tabTitle,tabContent,i;         if(tab.className!="selectTab") {             tabTitle=getTabTitle(tab.parentNode);             tabContent=getTabContent(tab.parentNode);             for(i=0;i<tabTitle.length;i++) {                 if(tabTitle[i].className=="selectTab") {                     tabTitle[i].className="unselectTab";                 }                 if(tabContent[i].className=="selectContent") {                     tabContent[i].className="unselectContent";                 }             }         tab.className="selectTab";         for(i=0;i<tabTitle.length;i++) {             if(tabTitle[i].className=="selectTab") {                 tabContent[i].className="selectContent";                 break;             }         }         }     }                                                 </script> <style type="text/css">  </style> </head> <body> <div   id="iwvjtn8m0"   class="tabs">     <h1 onmouseover="changTab(this)"> 選項卡[1] </h1>     <h1 onmousemove="changTab(this)"> 選項卡[2] </h1>     <h1 onmouseover="changTab(this)"> 選項卡[3] </h1>     <h1 onmousemove="changTab(this)"> 選項卡[4] </h1>     <div>1經過前述的多個步驟，一個基本的CHM文件已制作完畢，在編譯前還可進行一些完善功能的設置，具體如下所述。</div>     <div>2門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區</div>     <div>3經過前述的多個步驟，一個基本的CHM文件已制作完畢，在編譯前還可進行一些完善功能的設置，具體如下所述。</div>     <div>4門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區</div> </div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：用JavaScript 判斷用戶使用的是 IE6 還是 IE7

下一篇：javascript 實現的多瀏覽器支持的貪吃蛇webgame