源代码:
<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>