<html>
<head>
<title>test</title>
<style>
#op1{border-bottom:none;}
#box2{display:none;}
#box3{display:none;}
</style>
<script language="javascript">
function over(xc){
for(var i=1;i<=3;i++){
if(xc==i){
document.getElementById("op"+xc).style.borderBottom="none";
document.getElementById("box"+xc).style.display="";
}
else{
document.getElementById("op"+xc).style.borderBottom="1px solid black";
document.getElementById("box"+xc).style.display="none";
}
}
}
</script>
</head>
</html>
<body>
<table border=1 bordercolor=black width=500 height=200 align=center over('1')" id="op1">选项一</td>
<td onclick="over('2')" id="op2">选项二</td>
<td onclick="over('3')" id="op3">选项三</td>
</tr>
<tr><td colspan="3">
<div id="box1">选项一</div>
<div id="box2">选项二</div>
<div id="box3">选项三</div>
</td></tr>
</table>
</body>
</html>
我想要的效果应该清楚吧，谢谢。
1. css样式定错 (box2, box3默认隐藏);
2. else里面的getElementById, 数字应该用i而不是xc;
3. table那一行, style={border-collapse:collapse;}, 错误而且不需要;
修改之后:
<html>
<head>
<title>test</title>
<style>
table, td {border-style: solid;}
</style>
<script language="javascript">
function over(xc){
for(var i=1;i<=3;i++){
if(xc==i){
document.getElementById("op"+xc).style.borderBottom="0";
document.getElementById("box"+xc).style.display="";
}
else{
document.getElementById("op"+i).style.borderBottom="1px solid black";
document.getElementById("box"+i).style.display="none";
}
}
}
</script>
</head>
</html>
<body>
<table border="1" width="500" height="200" align="center" cellspacing="0">
<tr height=30>
<td onclick="over('1')" id="op1">选项一</td>
<td onclick="over('2')" id="op2">选项二</td>
<td onclick="over('3')" id="op3">选项三</td>
</tr>
<tr><td colspan="3" >
<div id="box1">选项一</div>
<div id="box2">选项二</div>
<div id="box3">选项三</div>
<script type="text/javascript">
over(1);
</script>
</td></tr>
</table>
</body>
</html>