表现、结构、行为分离的选项卡效果

从大学开始就一直对ＪＳ很感兴趣，可是却很少实际操作，今天练练，试写一个tab，调试过程中才发现光看不练问题不少！
其特点是扩展方便，只要自己添加标题和内容即可，自动初始化。
</p> <p><title>www.jb51.net表现、结构、行为分离的<a href="https://www.kunjuke.com/tag/4325/" title="选项卡" target="_blank">选项卡</a><a href="https://www.kunjuke.com/tag/44/" title="效果" target="_blank">效果</a> 北冥有鱼</title> </p> <p> window.onload=resetTab;<br /> function getTabTitle(tab) {<br /> var childNodesList=tab.childNodes;<br /> var titleNodes=new Array();<br /> var j=0;<br /> var i;<br /> for (i=0;i<childNodesList.length;i++) {<br /> if(childNodesList[i].nodeName=="H1") {<br /> titleNodes[j]=childNodesList[i];<br /> j++;<br /> }<br /> }<br /> return titleNodes;<br /> }<br /> function getTabContent(tab) {<br /> var childNodesList=tab.childNodes;<br /> var tabContent=new Array();<br /> var j=0;<br /> var i;<br /> for (i=0;i<childNodesList.length;i++) {<br /> if(childNodesList[i].nodeName=="DIV") {<br /> tabContent[j]=childNodesList[i];<br /> j++;<br /> }<br /> }<br /> return tabContent;<br /> }<br /> function resetTab() {<br /> var allDiv=document.getElementsByTagName("div");<br /> var tab=new Array();<br /> var j=0;<br /> var i;<br /> for (i=0;i </p> <p><!-- body { margin:50px; padding: 0px; } .tabs { width:auto; height:auto; border: 0px solid red; } .selectTab,.unselectTab { border:1px solid #BDDFF9; border-bottom-width: 0; width:150px; height:23px; line-height:23px; vertical-align: middle; text-align:center; background-color:#37709B; margin: 0; margin-right: 18px; font-weight:bold; font-size:14px; color:#FFF; cursor: pointer; float:left; } .unselectTab { color:#37709B; background-color: white; } .selectContent { border-top: 5px #37709b solid; padding-top: 8px; clear: both; } .unselectContent { display: none; } --> </p> <h1> 选项卡[1] </h1> <h1> 选项卡[2] </h1> <h1> 选项卡[3] </h1> <h1> 选项卡[4] </h1> <p> 1经过前述的多个步骤，一个基本的CHM文件已制作完毕，在编译前还可进行一些完善功能的设置，具体如下所述。<br /> 2门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区<br /> 3经过前述的多个步骤，一个基本的CHM文件已制作完毕，在编译前还可进行一些完善功能的设置，具体如下所述。<br /> 4门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区门类武功展区 </p> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]