不錯的js頁籤

2009-06-08

5450
0
JavaScript
2009-06-10

摘要:不錯的js分頁

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">
    <title>appform</title>
    <meta http-equiv="expires" content="0">
    <meta http-equiv="cache-control" content="no-cache">
        <SCRIPT>
    //用來紀錄作用中頁籤的ID 預設是第一個頁籤
    var currentLayer = "title1";
    //用來紀錄作用中頁籤的頁面ID 預設是第一個頁面
    var currentDiv = "d1";
    //用來紀錄預設的顏色
    var defaultColor = "#FFFFFF";
    //用來紀錄各頁籤所要用的顏色值
    var colorArray = new Array("#FFFF99","#CCFF00","#FFCC00","#00CCCC");
    //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?colorArray[cIndex]:defaultColor;
  div.style.backgroundColor = mode?colorArray[cIndex]:defaultColor;
  //可以直接寫div.style.backgroundColor = colorArray[cIndex]
    }
</SCRIPT>
</head>

<body onload="wfsapi()">
    <form id="form1" runat="server">
        <table width="300px"  border="0" cellspacing="0" cellpadding="0">
<tr>
<td id='title1' class="active" style="background-color:#FFFF99;cursor:hand;width:100px;" onclick="showLayer(this,'d1',0);" >tab1</td>
<td id='title2' class="inactive" style="cursor:hand;width:100px;" onclick="showLayer(this,'d2',1);" >tab2</td>
<td id='title3' class="inactive" style="cursor:hand;width:100px;" onclick="showLayer(this,'d3',2);" >tab3</td>
<td style="border-bottom:1px solid #7D7D7D;"> </td>
</tr>
</table>
<div id="d1" class="layer" style="display:block; background-color:#FFFF99;">
<TABLE border="1" cellpadding="3" cellspacing="1" width="300px" >
    <TR >
        <td colspan="1"  >
tab1
        </td>
</TABLE>
   </div>
<div id="d2" class="layer" style="display:block; background-color:#FFFF99;">
<TABLE border="1" cellpadding="3" cellspacing="1" width="300px" >
    <TR >
        <td colspan="1"  >
tab2
        </td>
</TABLE>
   </div>
<div id="d3" class="layer" style="display:block; background-color:#FFFF99;">
<TABLE border="1" cellpadding="3" cellspacing="1" width="300px" >
    <TR >
        <td colspan="1"  >
tab3
        </td>
</TABLE>
   </div>
    </form>
</body>
</html>

這是小弟在網路上找到不錯的分頁，分享給大家嚕！！

來源

http://blog.xuite.net/abgne/diary1/5258975

回首頁