关于< tbody >的一个实例，很实用。

更新时间：2008年03月13日 20:45:07 作者：

tbody Tab选项卡效果代码关键只是在<tbody>和选项卡的设置上。我在6个<tr></tr>段分别设置了<tbody></tbody>，目的是为了让一个javascript程序调用6个选项卡的时候可以循环设置tBodies属性。调用的时候是采用了遍历：将6个tBodies先全部都初始化为display='none'，然后紧接着将tBodies[n]设置为display='block'，将这一个tBodies显示出来。

看到很多网友对tbody属性的讨论，我特意做了个实例，希望能对大家有所帮助。

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">  <html>  <head>  <title> 脚本之家 tbody 选项卡效果演示</title>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">  <meta name="Generator" content="EditPlus">  <meta name="Author" content="田耕">  <meta name="Keywords" content="">  <meta name="Description" content="">  <style type="text/css">  body,table,tr,td{      font-size:12px;      color:#000000;      }  .sec1 {       background-color: #99CC99;      cursor: hand;      color: #000000;      border-left: 1px solid #FFFFFF;      border-top: 1px solid #FFFFFF;      border-right: 1px solid gray;      border-bottom: 1px solid #FFFFFF      }  .sec2 {       background-color: #D4D0C8;      cursor: hand;      color: #000000;      border-left: 1px solid #FFFFFF;       border-top: 1px solid #FFFFFF;       border-right: 1px solid gray;       font-weight: bold;       }  .main_tab {      background-color: #D4D0C8;      color: #000000;      border-left:1px solid #FFFFFF;      border-right: 1px solid gray;      border-bottom: 1px solid gray;       }  </style>  <script language="JavaScript">    </script>  </head>  <body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0">  <table width="588" border="0" cellspacing="1" cellpadding="4" align="center">    <tr>       <td width="82%">当前位置：展馆分布 &gt; <span id="weizi"><b>A</b>展馆<b>1</b>楼展厅</span></td>      <td width="18%">&nbsp;</td>    </tr>    <tr>       <td colspan="2" height="1" bgcolor="#000000"></td>    </tr>    <tr>       <td colspan="2" height="4"></td>    </tr>     <tr>       <td colspan="2">        <table border=0 cellspacing=0 cellpadding=0 width=578 id=secTable>          <tr height=20 align=center>             <td class=sec2 width=10% onClick="secBoard(0,'a','1')">A展馆1楼展厅</td>            <td class=sec1 width=10% onClick="secBoard(1,'a','2')">A展馆2楼展厅</td>            <td class=sec1 width=10% onClick="secBoard(2,'b','1')">B展馆1楼展厅</td>            <td class=sec1 width=10% onClick="secBoard(3,'b','2')">B展馆2楼展厅</td>            <td class=sec1 width=10% onClick="secBoard(4,'c','1')">C展馆1楼展厅</td>            <td class=sec1 width=10% onClick="secBoard(5,'c','2')">C展馆2楼展厅</td>          </tr>        </table>        <table border=0 cellspacing=0 cellpadding=0 width=578 height=160 id=mainTable class=main_tab>          <tbody style="display:block;">           <tr>             <td align="center">              一            </td>          </tr>          </tbody> <tbody style="display:none;">           <tr>             <td align="center">              二            </td>          </tr>          </tbody> <tbody style="display:none;">           <tr>             <td align="center">              三            </td>          </tr>          </tbody> <tbody style="display:none;">           <tr>             <td align="center">              四            </td>          </tr>          </tbody><tbody style="display:none;">           <tr>             <td align="center">              五            </td>          </tr>          </tbody><tbody style="display:none;">           <tr>             <td align="center">              六            </td>          </tr>          </tbody>         </table>      </td>    </tr>  </table>      </body>  </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

tbody

阿里前端开发中的规范要求
web前端开发中，适当的规范和标准绝不是消灭代码内容的创造性、优雅性,而是限制过度个性化，以一种普遍认可的统一方式,提升协作效率,降低沟通成本。规范的目的是为了编写高质量的代码。
2022-12-12
用div实现像table一样的布局方法
下面是我翻译的内容，是根据我对文章的理解意译的，你就别挑哪里翻译的不对了，我的目的只是传达这个CSS技巧。
2008-04-04
Javascript的匿名函数讲解
匿名函数可以有效的保证在页面上写入Javascript，而不会造成全局变量的污染。这在给一个不是很熟悉的页面增加Javascript时非常有效，也很优美。
2008-05-05
用iframe margin实现调用其他网页的某一区域的方法
用iframe margin实现调用其他网页的某一区域的方法...
2007-12-12
校内网css代码添加背景图片常用代码
喜欢个性化校内网网页的朋友，可以用到的，感兴趣可以看下，网页中背景设置的一些属性
2008-09-09
CSS设置网页的字体防浏览器浏览页面字体变形
CSS设置网页的字体防浏览器浏览页面字体变形...
2007-03-03
前端面试学习中几个常见有用的知识点
一场疫情过后，又要经历一次次面试，今天小编给大家分享前端面试学习中几个常见有用的知识点，非常不错，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下
2022-12-12
web打印的另类方法
web打印的另类方法...
2007-03-03
使用CSS解决文字环绕图片问题的代码
使用CSS解决文字环绕图片问题的代码...
2007-12-12
css层固定位置练习
不错，可以方便提示用户等信息
2008-08-08