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

2024-05-06 14:18:31

字體：大中小

來源：轉載

供稿：網友

從大學開始就一直對ＪＳ很感興趣，可是卻很少實際操作，今天練練，試寫一個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 <style type="text/css">  </style> </head> <body>      <h1 onmouseover="changTab(this)"> 選項卡[1] </h1>     <h1 onmousemove="changTab(this)"> 選項卡[2] </h1>     <h1 onmouseover="changTab(this)"> 選項卡[3] </h1>     <h1 onmousemove="changTab(this)"> 選項卡[4] </h1>     1經過前述的多個步驟，一個基本的CHM文件已制作完畢，在編譯前還可進行一些完善功能的設置，具體如下所述。     2門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區     3經過前述的多個步驟，一個基本的CHM文件已制作完畢，在編譯前還可進行一些完善功能的設置，具體如下所述。     4門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區門類武功展區              </SPAN>
</div>
</div>
<div   id="iwvjtn8m0"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="iwvjtn8m0"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/05-06/1045790.html'>JavaScript表單常用驗證集合</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/05-06/1045792.html'>JavaScript的Cookies</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="iwvjtn8m0"   class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您沒什么話要說嗎？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

學習交流