Table+CSS实现选项卡功能+AJAX按需要调用

table.html代码：

 1<script language=javascript>
 2     var xmlhttp;
 3      function createXmlhttp()
 4      {
 5           if(window.ActiveXObject)
 6           {
 7               xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 8           }
 9           else if(window.XMLHttpRequest())
10           {
11               xmlhttp=new XMLHttpRequest()
12           }
13       }
14      function getTxt(n)
15      {
16          createXmlhttp();
17          xmlhttp.open("get","http://127.0.0.1/table.asp?tableid="+n,"true");
18          xmlhttp.onreadystatechange=callBack;
19          xmlhttp.send(null);
20       }
21       function callBack()
22       {
23           if(xmlhttp.readyState==4)
24           {
25               if(xmlhttp.status==200)
26               {
27                   //
28                   document.getElementById("test").innerHTML=xmlhttp.responseText;
29               }
30           }
31       }
32          
33function secBoard(n)
34{
35  for(i=0;i<secTable.cells.length;i++)
36    secTable.cells[i].className="sec1";
37  secTable.cells[n].className="sec2";
38  }
43</script>
44      <style type=text/css>
45td {}{ 
46    font-size: 12px;
47    color: #000000;
48    line-height: 150%;
49    }
50.sec1 {}{ 
51    background-color: #EEEEEE;
52    cursor: hand;
53    color: #000000;
54    border-left: 1px solid #FFFFFF;
55    border-top: 1px solid #FFFFFF;
56    border-right: 1px solid gray;
57    border-bottom: 1px solid #FFFFFF
58    }
59.sec2 {}{ 
60    background-color: #D4D0C8;
61    cursor: hand;
62    color: #000000;
63    border-left: 1px solid #FFFFFF; 
64    border-top: 1px solid #FFFFFF; 
65    border-right: 1px solid gray; 
66    font-weight: bold; 
67    }
68.main_tab {}{
69    background-color: #D4D0C8;
70    color: #000000;
71    border-left:1px solid #FFFFFF;
72    border-right: 1px solid gray;
73    border-bottom: 1px solid gray; 
74    }
75</style>
76      
77      <table border=0 cellspacing=0 cellpadding=0 width=549 id=secTable>
78        <tr height=20 align=center> 
79          <td class=sec2 width=10% onclick="secBoard(0);getTxt(0)">关于TBODY标记</td>
80          <td class=sec1 width=10% onclick="secBoard(1);getTxt(1)">关于cells集合</td>
81          <td class=sec1 width=10% onclick="secBoard(2);getTxt(2)">关于tBodies集合</td>
82          <td class=sec1 width=10% onclick="secBoard(3);getTxt(3)">关于display属性</td>
83        </tr>
84      </table>
85      <table border=0 cellspacing=0 cellpadding=0 width=549 height=240 id=mainTable class=main_tab>
86        <tbody> 
87        <tr> 
88          <td align=center valign=top ><div id="test">默认内容 </div>
89          </td>
90        </tr>
91        </tbody>
92      </table>

Table.asp代码如下：

 1<%
 2if request.QueryString("tableid")<>"" then
 3dim tableid
 4tableid=request.QueryString("tableid")
 5
 6select case tableid
 7case 0
 8response.Write("<p>table1</p>")
 9case 1
10response.Write("<p>table2</p>")
11case 2
12response.Write("<p>table3</p>")
13case 3
14response.Write("<p>table4</p>")
15end select
16else
17response.Write("Error")
18end if
19
20%>

简单实现.

转载于:https://www.cnblogs.com/bushize/archive/2006/06/08/420302.html