您好,欢迎来到点滴吧! 手机版
点滴吧www.diandiba.com
记录点点滴滴,尽在点滴吧
  • 文章
  • 文章
  • 特效
  • 素材
  • 景点
您现在的位置:首页 > JavaScript教程 > 文章正文
js选项卡在谷歌、火狐浏览器没有效果的解决办法
更新时间:2015/1/5 23:32:13   点击:3658次

源代码:

<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>


相关文章
导航分类
热门文章
关于我们| 联系我们| 免责声明| 网站地图|
CopyRight 2012-2015 www.diandiba.com - 点滴吧 All Rights Reserved
滇ICP备09005765号-2