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

　　其特点是扩展方便，只要自己添加标题和内容即可，自动初始化。

<!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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%3E%20%0D%0A%20%20%20%20window.onload%3DresetTab%3B%20%0D%0A%20%20%20%20function%20getTabTitle(tab)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20childNodesList%3Dtab.childNodes%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20titleNodes%3Dnew%20Array()%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20j%3D0%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20i%3B%20%0D%0A%20%20%20%20%20%20%20%20for%20(i%3D0%3Bi%3CchildNodesList.length%3Bi%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(childNodesList%5Bi%5D.nodeName%3D%3D%22H1%22)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20titleNodes%5Bj%5D%3DchildNodesList%5Bi%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20j%2B%2B%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20return%20titleNodes%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20function%20getTabContent(tab)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20childNodesList%3Dtab.childNodes%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20tabContent%3Dnew%20Array()%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20j%3D0%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20i%3B%20%0D%0A%20%20%20%20%20%20%20%20for%20(i%3D0%3Bi%3CchildNodesList.length%3Bi%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(childNodesList%5Bi%5D.nodeName%3D%3D%22DIV%22)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tabContent%5Bj%5D%3DchildNodesList%5Bi%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20j%2B%2B%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20return%20tabContent%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20function%20resetTab()%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20allDiv%3Ddocument.getElementsByTagName(%22div%22)%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20tab%3Dnew%20Array()%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20j%3D0%3B%20%0D%0A%20%20%20%20%20%20%20%20var%20i%3B%20%0D%0A%20%20%20%20%20%20%20%20for%20(i%3D0%3Bi%3CallDiv.length%3Bi%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(allDiv%5Bi%5D.className%3D%3D%22tabs%22)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tab%5Bj%5D%3DallDiv%5Bi%5D%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20j%2B%2B%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20var%20tabTitle%2CtabContent%3B%20%0D%0A%20%20%20%20%20%20%20%20for(i%3D0%3Bi%3Ctab.length%3Bi%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20tabTitle%3DgetTabTitle(tab%5Bi%5D)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20tabTitle%5B0%5D.className%3D%22selectTab%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20tabContent%3DgetTabContent(tab%5Bi%5D)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20tabContent%5B0%5D.className%3D%22selectContent%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20for%20(j%3D1%3Bj%3CtabTitle.length%3Bj%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tabTitle%5Bj%5D.className%3D%22unselectTab%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tabContent%5Bj%5D.className%3D%22unselectContent%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20function%20changTab(tab)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20var%20tabTitle%2CtabContent%2Ci%3B%20%0D%0A%20%20%20%20%20%20%20%20if(tab.className!%3D%22selectTab%22)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20tabTitle%3DgetTabTitle(tab.parentNode)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20tabContent%3DgetTabContent(tab.parentNode)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20for(i%3D0%3Bi%3CtabTitle.length%3Bi%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(tabTitle%5Bi%5D.className%3D%3D%22selectTab%22)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tabTitle%5Bi%5D.className%3D%22unselectTab%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(tabContent%5Bi%5D.className%3D%3D%22selectContent%22)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tabContent%5Bi%5D.className%3D%22unselectContent%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20tab.className%3D%22selectTab%22%3B%20%0D%0A%20%20%20%20%20%20%20%20for(i%3D0%3Bi%3CtabTitle.length%3Bi%2B%2B)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20if(tabTitle%5Bi%5D.className%3D%3D%22selectTab%22)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tabContent%5Bi%5D.className%3D%22selectContent%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%0D%0A%0D%0A%0D%0A%3C%2Fscript%3E"> 
<style type="text/css"> 
<!-- 
 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; 
 }

--> 
</style> 
</head> 
<body> 
<div 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需刷新才能执行]

教程首页更多教程