JS兼容问题，IE正常，FF不起作用

hk207 2008-09-01 03:36:05

如题，那位高手来修改一下该JS啊，是修改，不是换哦。（IE正常。FF不起作用）



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

<style type="text/css">

.sec1{

background:#33FFFF

}

.sec2{

background:#FFCCFF

}

</style>

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

</head>

<body>

<form name="test" action="" >

<table width="100%" border="1" cellspacing="0" cellpadding="0" id="secTable">

  <tr>

    <td width="20%" height="32" align="center" class="sec2" onMouseOver="secBoard(0)">1</td>

    <td width="20%" align="center" class="sec1" onMouseOver="secBoard(1)">2</td>

  </tr>

</table>

<table width="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" id="mainTable">

 <tbody style="display:block;">

  <tr>

    <td width="20%" height="32" align="center" bgcolor="#FFFFFF">1</td>

    <td align="center" bgcolor="#FFFFFF"><input type="text" name="a1" value="" /></td>

    <td align="center" bgcolor="#FFFFFF"><input type="text" name="a2" value="" /></td>

    <td align="center" bgcolor="#FFFFFF"><input type="text" name="a3" value="" /></td>

    <td align="center" bgcolor="#FFFFFF"><input type="text" name="a4" value="" /></td>

  </tr>

 </tbody>

  <tbody style="display:none;">

  <tr>

    <td width="20%" height="32" align="center" bgcolor="#FFFFFF">2</td>

    <td align="center" bgcolor="#FFFFFF"><input type="text" name="b1" value="" /></td>

    <td align="center" bgcolor="#FFFFFF"><input type="text" name="b2" value="" /></td>

    <td align="center" bgcolor="#FFFFFF"><input type="text" name="b3" value="" /></td>

    <td align="center" bgcolor="#FFFFFF"><input type="text" name="b4" value="" /></td>

  </tr>

 </tbody>

</table>

</form>

</body>

</html>

...全文

112 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

tiger592 2009-02-13

打赏
举报

good

白衣旗本 2008-09-02

打赏
举报

ls正解

Go 旅城通票 2008-09-02

打赏
举报

你自己设置的样式不对

<table width="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" id="mainTable">
<tbody style="display:block;">
删除这个style属性

没事不要把display设置成block

hk207 2008-09-02

打赏
举报

[Quote=引用 4 楼 showbo 的回复:]
HTML code<!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>
<style type="text/css">
.sec1{
background:#33FFFF
}
.sec2{
background:#FFCCFF
}
</style>
<script language=…
[/Quote]

在FF下可以滑动，但是在FF有个问题，就是初始内容宽度不对，还有就是鼠标放上面切换内容会多出来一行。

西安风影 2008-09-02

打赏
举报

zhihuixiaole 2008-09-02

打赏
举报

xuexi

Go 旅城通票 2008-09-02

打赏
举报

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

<style type="text/css">

.sec1{

background:#33FFFF

}

.sec2{

background:#FFCCFF

}

</style>

<script language="javascript" type="text/javascript">

function  secBoard(n)

{

var secTable=document.getElementById('secTable');//===================

for(var i=0;i<secTable.rows[0].cells.length;i++)

{

  if(i==n)secTable.rows[0].cells[i].className="sec2";

  else secTable.rows[0].cells[i].className="sec1";

}

var tbs=document.getElementById('mainTable').getElementsByTagName('tbody');//===================

for(var i=0;i<tbs.length;i++)

{

  if(i==n)tbs[i].style.display="";

  else tbs[i].style.display="none";

}

}

</script>

</head>

<body>

<form name="test" action="" >

<table width="100%" border="1" cellspacing="0" cellpadding="0" id="secTable">

  <tr>

    <td width="20%" height="32" align="center" class="sec2" onMouseOver="secBoard(0)">1</td>

    <td width="20%" align="center" class="sec1" onMouseOver="secBoard(1)">2</td><td width="20%" align="center" class="sec1" onMouseOver="secBoard(2)">3</td>

  </tr>

</table>

<table width="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" id="mainTable">

 <tbody style="display:block;">

  <tr>

    <td width="20%" height="32" align="center" bgcolor="#FFFFFF">1</td>

    <td align="center" bgcolor="#FFFFFF"><input type="text" name="a1" value="a1" /></td>

    <td align="center" bgcolor="#FFFFFF"><input type="text" name="a2" value="a2" /></td>

    <td align="center" bgcolor="#FFFFFF"><input type="text" name="a3" value="" /></td>

    <td align="center" bgcolor="#FFFFFF"><input type="text" name="a4" value="" /></td>

  </tr>

 </tbody>

  <tbody style="display:none;">

  <tr>

    <td width="20%" height="32" align="center" bgcolor="#FFFFFF">2</td>

    <td align="center" bgcolor="#FFFFFF"><input type="text" name="b1" value="b1" /></td>

    <td align="center" bgcolor="#FFFFFF"><input type="text" name="b2" value="b2" /></td>

    <td align="center" bgcolor="#FFFFFF"><input type="text" name="b3" value="" /></td>

    <td align="center" bgcolor="#FFFFFF"><input type="text" name="b4" value="" /></td>

  </tr>

 </tbody>

<tbody style="display:none;">

  <tr>

    <td width="20%" height="32" align="center" bgcolor="#FFFFFF">3</td>

    <td align="center" bgcolor="#FFFFFF"><input type="text" name="c1" value="c1" /></td>

    <td align="center" bgcolor="#FFFFFF"><input type="text" name="c2" value="c2" /></td>

    <td align="center" bgcolor="#FFFFFF"><input type="text" name="c3" value="" /></td>

    <td align="center" bgcolor="#FFFFFF"><input type="text" name="c4" value="" /></td>

  </tr>

 </tbody>

</table>

</form>

</body>

</html>