---------------阿谢—————『flyxiaoye』----------

原来我已经是无梦之人!---温州07人

Tab控件效果
<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> 
阅读更多
想对作者说点什么? 我来说一句

MFC tab控件的美化

2013年10月19日 5.43MB 下载

没有更多推荐了,返回首页

不良信息举报

Tab控件效果

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭