动网论坛,站长建站首选,国内使用量最多的论坛软件 动网论坛官方技术讨论区 站长工具 申请属于您自己的免费论坛
首页 | 新闻资讯 | 网站运营 | 网络编程 | 数据库 | 服务器 | 网页设计 | 图像媒体 | 网络应用 | 搜索优化 | 资源下载 | 动网主机 | DVBOX
    本站内  互联网 ASP论坛  ASP.Net论坛  PHP论坛
   网页设计 → 阅读文章

 用JAVASCRIPT做出WINDOWS中选项卡的效果

作者:无从考证 来源:转载 
阅读 2731 人次 , 2006-2-15 14:35:00 

源码:

<html>
<head>
<title>window</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type=text/css>
td {
    font-size: 12px;
    font-family:arial;
    color: #000000;
    line-height: 150%;
    }
.sec1 {
    background-color: #EEEEEE;
    cursor: hand;
    color: #000000;
    border-left: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid gray;
    border-bottom: 1px solid #FFFFFF
    }
.sec2 {
    background-color: #E4EAF8;
    cursor: hand;
    color: #000000;
    border-left: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid gray;
    font-weight: bold;
    }
.main_tab {
    background-color: #E4EAF8;
    color: #000000;
    border-left:1px solid #FFFFFF;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    }
</style>

<script language=javascript>
<!-- 
  function secBoard(n)  {
    for(i=0; i<secTable.cells.length; i++){
      secTable.cells.className="sec1";
    }
    secTable.cells[n].className="sec2";

    for(i=0; i<mainTable.tBodies.length; i++){
      mainTable.tBodies.style.display="none";
    }
    mainTable.tBodies[n].style.display="block";
  }
//-->
</script>
</head>

<body>
  <table border=0 cellspacing=0 cellpadding=0 width=549 id=secTable>
    <tr height=20 align=center>
      <td class=sec2 width=10% onclick="secBoard(0)">General Information</td>
      <td class=sec1 width=10% onclick="secBoard(1)">Team</td>
      <td class=sec1 width=10% onclick="secBoard(2)">Documentation</td>
      <td class=sec1 width=10% onclick="secBoard(3)">Test Report</td>
    </tr>
  </table>
  <table border=0 cellspacing=0 cellpadding=0 width=549 height=240 id=mainTable class=main_tab>
    <tbody style="display:block;">
      <tr>
        <td align=center valign=top> <br> <br> text </td>
      </tr>
    </tbody>
    <tbody style="display:none;">
      <tr>
        <td align=center valign=top> <br>
          <br>
          text1 </td>
      </tr>
    </tbody>
    <tbody style="display:none;">
      <tr>
        <td align=center valign=top> <br><br>   text2 </td>
      </tr>
    </tbody>
    <tbody style="display:none;">
      <tr>
        <td align=center valign=top> <br><br>   text3 </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

  
 本文Tagswindows  组网  
 收藏本文  打印本文  论坛讨论  关闭窗口
· 上一篇:禁止图片上的右键(不准下载图片)用JAVASCRIPT实现
· 下一篇:Windows 2000下PHP服务器安装攻略
· 让JavaScript弹出窗口变得体贴一些
· Javascript实例教程(21-9)
· 实现网页的动态过渡效果
· 如何实现iframe(嵌入式帧)的自适应高度
· 关于网页源代码屏蔽(1)


关于本站 | 联系我们 | 业务合作 | 客户案例 | 诚聘英才 | 广告合作 | 收藏本站
海口动网先锋网络科技有限公司版权所有
Copyright © 2000 - 2006 Cndw.Com
中华人民共和国电信与信息服务业务经营许可证编号 琼 ICP 020077