<html>
<head>
<style>
td.act{border:2 solid black; border-bottom:0}
td.dis{border:0;border-bottom:2 solid black}
</style>
</head>
<body>
<table width=500 height=200 bgcolor=#eeeeee cellspacing=0 cellpadding=0>
<tr>
<td height=20><table width=100% style="text-align:center" cellspacing=0 cellpadding=0>
<tr>
<td id=tab1 value=1 onclick="toggle(this)" class="act">red</td>
<td id=tab2 value=2 onclick="toggle(this)" class="dis">blue</td>
<td id=tab3 value=3 onclick="toggle(this)" class="dis">green</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color:#eeeeee">
<div id=div1 style="position:relative;top:0;left:0;width:100%;height:100%;border:2 solid black; border-top:0;color:#f00;display:block">
11111111 111111111 11111111111</div>
<div id=div2 style="position:relative;top:0;left:0;width:100%;height:100%;border:2 solid black; border-top:0;color:#00f;display:none">
222222 22222222 2222222222</div>
<div id=div3 style="position:relative;top:0;left:0;width:100%;height:100%;border:2 solid black; border-top:0;color:#0f0;display:none">
33333333 33333333 3333333</div>
</td>
</tr>
</table>
<script language="JavaScript">
<!--
function toggle(x){
for(var i=1; i<=3; i++){
var e=eval("div"+ i);
var y=eval("tab"+i);
if(i==x.value){
e.style.display="block";
y.className="act";
}else {
e.style.display="none";
y.className="dis";
}
}
}
//-->
</script>
</body>
</html>
<head>
<style>
td.act{border:2 solid black; border-bottom:0}
td.dis{border:0;border-bottom:2 solid black}
</style>
</head>
<body>
<table width=500 height=200 bgcolor=#eeeeee cellspacing=0 cellpadding=0>
<tr>
<td height=20><table width=100% style="text-align:center" cellspacing=0 cellpadding=0>
<tr>
<td id=tab1 value=1 onclick="toggle(this)" class="act">red</td>
<td id=tab2 value=2 onclick="toggle(this)" class="dis">blue</td>
<td id=tab3 value=3 onclick="toggle(this)" class="dis">green</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color:#eeeeee">
<div id=div1 style="position:relative;top:0;left:0;width:100%;height:100%;border:2 solid black; border-top:0;color:#f00;display:block">
11111111 111111111 11111111111</div>
<div id=div2 style="position:relative;top:0;left:0;width:100%;height:100%;border:2 solid black; border-top:0;color:#00f;display:none">
222222 22222222 2222222222</div>
<div id=div3 style="position:relative;top:0;left:0;width:100%;height:100%;border:2 solid black; border-top:0;color:#0f0;display:none">
33333333 33333333 3333333</div>
</td>
</tr>
</table>
<script language="JavaScript">
<!--
function toggle(x){
for(var i=1; i<=3; i++){
var e=eval("div"+ i);
var y=eval("tab"+i);
if(i==x.value){
e.style.display="block";
y.className="act";
}else {
e.style.display="none";
y.className="dis";
}
}
}
//-->
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
