出自ProgWiki
用途
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>
