2007/08/23 | 这样的效果是用层还是用表格呢
类别(网页类学习笔记) | 评论(0) | 阅读(33) | 发表于 14:29

<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Generator" content="EditPlus">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body,table,tr,td{
 font-size:12px;
 color:#000000;
 }
.sec1 {
    background-color: #99CC99;
    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: #D4D0C8;
    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: #D4D0C8;
    color: #000000;
    border-left:1px solid #FFFFFF;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    }
</style>    <script language="javascript">
<!--
function secBoard(n,x,y)
{
  for(i=0;i<secTable.cells.length;i++){
    secTable.cells[i].className="sec1";
  secTable.cells[n].className="sec2";}
  for(i=0;i<mainTable.tBodies.length;i++){
    mainTable.tBodies[i].style.display="none";
  mainTable.tBodies[n].style.display="block";}
  weizi.innerHTML="<b>"+x.toUpperCase()+"</b>展馆<b>"+y+"</b>楼展厅";
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0">
<table width="588" border="0" cellspacing="1" cellpadding="4" align="center">
  <tr>
    <td width="82%">当前位置:展馆分布 > <span id="weizi"><b>A</b>展馆<b>1</b>楼展厅</span></td>
    <td width="18%"></td>
  </tr>
  <tr>
    <td colspan="2" height="1" bgcolor="#000000"></td>
  </tr>
  <tr>
    <td colspan="2" height="4"></td>
  </tr>
  <tr>
    <td colspan="2">
      <table border=0 cellspacing=0 cellpadding=0 width=578 id=secTable>
        <tr height=20 align=center>
          <td class=sec2 width=10% onClick="secBoard(0,'a','1')">A展馆1楼展厅</td>
          <td class=sec1 width=10% onClick="secBoard(1,'a','2')">A展馆2楼展厅</td>
          <td class=sec1 width=10% onClick="secBoard(2,'b','1')">B展馆1楼展厅</td>
          <td class=sec1 width=10% onClick="secBoard(3,'b','2')">B展馆2楼展厅</td>
          <td class=sec1 width=10% onClick="secBoard(4,'c','1')">C展馆1楼展厅</td>
          <td class=sec1 width=10% onClick="secBoard(5,'c','2')">C展馆2楼展厅</td>
        </tr>
      </table>
      <table border=0 cellspacing=0 cellpadding=0 width=578 height=160 id=mainTable class=main_tab>
        <tbody style="display:block;">
        <tr>
          <td align="center">
            一
          </td>
        </tr>
        </tbody> <tbody style="display:none;">
        <tr>
          <td align="center">
            二
          </td>
        </tr>
        </tbody> <tbody style="display:none;">
        <tr>
          <td align="center">
            三
          </td>
        </tr>
        </tbody> <tbody style="display:none;">
        <tr>
          <td align="center">
            四
          </td>
        </tr>
        </tbody><tbody style="display:none;">
        <tr>
          <td align="center">
            五
          </td>
        </tr>
        </tbody><tbody style="display:none;">
        <tr>
          <td align="center">
            六
          </td>
        </tr>
        </tbody>
      </table>
    </td>
  </tr>
</table> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <link rev="made" href="mailto:cn_yanzi@yahoo.com.cn" />
    <title>{ 在指尖绽放的花朵 }</title>
    <style type="text/css">
      div.dis1 {
        display:none;
        }
      div.dis2 {
        display:block;
        }
    </style>
    <script type="text/javascript">
    <!--//
      function xingzhe( pram ) {

        for (i=1;i<4;i++) {

          theDiv = "divNo_" + i;
          document.getElementById( theDiv ).className="dis1";

        }
       
        theDiv = "divNo_" + pram;
        document.getElementById( theDiv ).className="dis2";

      }
    //-->
    </script>
  </head>
  <body>
    <div>
      <a href="##" onclick="xingzhe(1)">[ 1 ]</a>
      <a href="##" onclick="xingzhe(2)">[ 2 ]</a>
      <a href="##" onclick="xingzhe(3)">[ 3 ]</a>
    </div>
    <div class="dis2" id="divNo_1">
      这是层 #1</div>
    <div class="dis1" id="divNo_2">
      这是层 #2</div>
    <div class="dis1" id="divNo_3">
      这是层 #3</div>
  </body>
</html>

3

评论Comments