当前位置：首页 → 问答吧 → 做了一个tab标签式的网页但是出错了

做了一个tab标签式的网页但是出错了

时间：2011-11-24

来源：互联网

原来想鼠标放在哪个单元格上就把单元格背景换成和层背景一样的黄色并且出现相应的层中的内容但是发现要实现换单元格背景就无法实现层的转换实现层的转换就无法实现转换单元格背景大家帮我看看这是为什么先谢谢各位了！
以下为代码
JScript code


<html>
<head>
<title>
tab标签式页面（完整版）
</title>
<style>
div.a{width:500;height:500;background-

color:yellow}
</style>
</head>
<body>
<table width=300 border=0 cellspacing=0>
<tr>

<td onmouseover="tabchange(0)">
a
</td>
</a>

<td onmouseover="tabchange(1)">
b
</td>


<td onmouseover="tabchange(2)">
c
</td>

</tr>
</table>
<div id=0 class=a>aaaa</div>
<div id=1 class=a style="display:none">bbbb</div>
<div id=2 class=a style="display:none">cccc</div>

<script>
function tabchange(i){

for(var a=0;a<3;a++){
if(i==a){document.getElementById

(a).style.display="block"}
else{document.getElementById

(a).style.display="none"}
}
}

var tds=document.getElementsByTagName("td")
for(var i=0,td;td=tds[i++];){
td.onmouseover=function()

{this.style.background="yellow"}
td.onmouseout=function()

{this.style.background="white"}
}


</script>
</body>
</html>

作者: wan_dou_ 发布时间: 2011-11-24

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>
<title>
tab标签式页面（完整版）
</title>
<style>
div.a{width:500;height:500;}
</style>
</head>
<body>
<table width=300 border=0 cellspacing=0>
<tr>

<td>
a
</td>
</a>

<td>
b
</td>


<td>
c
</td>

</tr>
</table>
<div id="0" class="a">aaaa</div>
<div id="1" class="a" style="display:none">bbbb</div>
<div id="2" class="a" style="display:none">cccc</div>

<script>
function tabchange(i){
for(var a=0;a<3;a++){
if(i==a){document.getElementById(a+"").style.display="block"}
else{document.getElementById(a+"").style.display="none"}
}
}

var tds=document.getElementsByTagName("td");
for(var i=0,td;td=tds[i++];){~function(i){
td.onmouseover=function(){this.style.background="yellow";tabchange(i - 1);}
td.onmouseout=function(){this.style.background="white";tabchange(i - 1)}
}(i)}


</script>
</body>
</html>