用戶端Tabs頁面

出自 ProgWiki
前往: 導覽搜尋

用途

  • 在用戶端使用的Tabs頁面。

TestTabsPage.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>測試Tabs頁面</title>
    <style type="text/css">
    /* active樣式是給目前所選取頁籤用的 */
    .active {     
     border: 1px solid #7D7D7D;
     border-bottom: none;
     /*width: 70;*/
     cursor:pointer;
     font-weight: bold; color:#333399;
    }
    /* inactive樣式是給未選取頁籤用的 */
    .inactive {
     border: 1px solid #7D7D7D;     
     border-bottom: 1px solid #7D7D7D;     
     /*width: 70;*/
     cursor:pointer;
    }
    /* layer樣式是給DIV用的 */
    .layer {
     border: 1px solid #7D7D7D;
     border-top: none;
     width: 400;
     height: 200;
     text-align: center;
    }
    /* toprightside樣式是給五個頁籤右邊的隱藏區塊用的 */
    .toprightside {
     border-bottom: 1px solid #7D7D7D;
    }
    </style>
    <script type="text/javascript">
     //用來紀錄作用中頁籤的ID 預設是第一個頁籤
     var currentLayer = "cell1";
     //用來紀錄作用中頁籤的頁面ID 預設是第一個頁面
     var currentDiv = "d1";
     //用來紀錄預設的顏色
     var defaultColor = "#E3E3F2";      //I:未點選頁籤的顏色
     //用來紀錄各頁籤所要用的顏色值(背景色)
     //var colorArray = new Array("WhiteSmoke","WhiteSmoke","WhiteSmoke","WhiteSmoke","WhiteSmoke");
     //showLayer()函式,參數為觸發該函式的元素、所屬頁面ID及顏色索引
 
     function showLayer(obj,div,cIndex){
          //若目前的currentLayer不等於obj.id 表示要換頁面
          if(currentLayer!=obj.id) {
           //先改變上一個頁籤及頁面的樣式
           showIt(currentLayer,currentDiv,cIndex,false);
           //重設currentLayer及currentDiv的值
           currentLayer = obj.id;
           currentDiv = div;
           //最後再改變目前頁籤及頁面的樣式
           showIt(currentLayer,currentDiv,cIndex,true);
          }
     }
     //showIt()函式,參數為currentLayer、currentDiv、colorArray的索引及模式
     //mode為true時 則表示目前作用中 所以要顯示
     //mode為false時 則表示目前非作用中 所以要隱藏
 
     function showIt(o,d,cIndex,mode)
     {
          var obj = document.getElementById(o);
          var div = document.getElementById(d);
          //改變className則表示改變該元素所用的class
          obj.className = mode?"active":"inactive";
          div.style.display = mode?"block":"none";
          //改變頁籤及頁面的背景顏色
          obj.style.backgroundColor = mode?"WhiteSmoke":defaultColor;//mode?colorArray[cIndex]:defaultColor;
          div.style.backgroundColor = mode?"WhiteSmoke":defaultColor;//mode?colorArray[cIndex]:defaultColor;
          //可以直接寫div.style.backgroundColor = colorArray[cIndex]
     }
    </script>
</head>
<body>
    <div>
    <table border="0" cellpadding="4" cellspacing="0" style="width: 850px; font-size:15px; height: 600px;">
        <tbody>
        <tr style="height: 460px" valign="top"><td colspan="2">
         <table width="802" border="0" cellspacing="0" cellpadding="2">
             <tbody>
             <tr align="center">
              <td class="active" id="cell1" onclick="showLayer(this,'d1',0);" style="background-color: whitesmoke; width:80px">
				  第1頁</td>
              <td class="inactive" id="cell2" onclick="showLayer(this,'d2',1);" style="background-color: #e3e3f2; width:80px">
				  第2頁</td>
              <td class="inactive" id="cell3" onclick="showLayer(this,'d3',2);" style="background-color: #e3e3f2; width:80px">
				  第3頁</td>
              <td class="inactive" id="cell4" onclick="showLayer(this,'d4',3);" style="background-color: #e3e3f2; width:80px">
				  第4頁</td>
              <td class="inactive" id="cell5" onclick="showLayer(this,'d5',4);" style="background-color: #e3e3f2; width:80px">
				  第5頁</td>
              <td class="inactive" id="cell6" onclick="showLayer(this,'d6',5);" style="background-color: #e3e3f2; width:80px">
				  第6頁</td>
             </tr>             
            </tbody>             
            </table>
 <div id="d1" class="layer" style="display:block; width: 800px;">
            第1頁的內容
</div>
<div id="d2" class="layer" style="display:none; width: 800px;">
            第2頁的內容
</div>
<div id="d3" class="layer" style="display:none; width: 800px;">
            第3頁的內容
</div>
<div id="d4" class="layer" style="display:none; width: 800px;">
            第4頁的內容
</div>
<div id="d5" class="layer" style="display:none; width: 800px;">
            第5頁的內容
</div>
<div id="d6" class="layer" style="display:none; width: 800px;">
            第6頁的內容
</div>
    </tbody>
    </table>
    </div>
</body>
</html>