关闭

Tab控件效果

217人阅读 评论(0) 收藏 举报
<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> 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:99826次
    • 积分:2757
    • 等级:
    • 排名:第13033名
    • 原创:157篇
    • 转载:43篇
    • 译文:0篇
    • 评论:50条
    文章分类
    好的链接
    经典网站---Web开发