源代码:
<script language="javascript" type="text/javascript">
function secBoard(n)
{
for(i=0;i<sectable.cells.length;i++){
sectable.cells[i].className="sec1";
sectable.cells[n].className="sec2";}
for(i=0;i<maintable.tBodies.length;i++){
maintable.tBodies[i].style.display="none";
maintable.tBodies[n].style.display="block";}
}
</script>
<table width="72%" border="0" cellpadding="0" cellspacing="0" id="sectable">
<tbody>
<tr align="center" height="20">
<td align="center" class="sec2" onclick="secBoard(0)" bgcolor="#6699ff">选项卡1</td>
<td> </td>
<td align="center" class="sec1" onclick="secBoard(1)" bgcolor="#6699ff">选项卡2</td>
</tr>
</tbody>
</table>
<table id="maintable" cellspacing="0" cellpadding="0" width="100%" border="0">
<!--关于tbody标记-->
<tbody style="display: block">
<tr>
<td valign="top" align="center">
<table width="98%" height="35" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#66ffff">
<tbody>
<tr>
<td height="5"></td>
</tr>
<tr>
<td>2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tbody style="display: none">
<tr>
<td valign="top">
<table width="98%" height="35" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#66ffff">
<tbody>
<tr>
<td height="5" colspan="2"></td>
</tr>
<tr>
<td>1</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>以上代码在IE下运行正常,在在谷歌、火狐浏览器下没有效果
解决办法:
修改js代码为:
<script language="javascript" type="text/javascript">
function secBoard(n)
{
for(i=0;i<secTable.rows[0].cells.length;i++){
secTable.rows[0].cells[i].className="sec1";
secTable.rows[0].cells[n].className="sec2";}
for(i=0;i<mainTable.tBodies.length;i++){
mainTable.tBodies[i].style.display="none";
mainTable.tBodies[n].style.display="block";}
}
</script>