明辉站/网站教程/内容

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

网站教程2024-06-04 阅读
[摘要]源码:<html><head><title>window</title><meta http-equiv="content-type" content="text/html;charset=gb2312"...

源码:

<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>


……

相关阅读