滑门自动生成小程序

这个小程序是原来做创力的时候收集，感觉比较好用！可以让初学者学一下，但由于程序是由ASP编写的！生成代码是表格，不过大家可以根据自己的需要改成DIV的！
演示：http://www.4one.com.cn/hm/aspooeffect.asp


生成代码如下（可以根据自己的需要进行修改）

1. <SCRIPT language=JavaScript>
   
2. var tID=0;
   
3. function ShowTabs(ID){
   
4.   if(ID!=tID){
   
5.     Tabs[tID].style.display='none';
   
6.         Tabs[ID].style.display='';
   
7.         TabTitle[tID].className='nlabel';
   
8.         TabTitle[ID].className='alabel';
   
9.         tID=ID;
   
10.   }
    
11. }
    
12. </SCRIPT>
    
13. <style type="text/css">
    
14. <!--
    
15. .stable {  /*-舌签标题整个table表格的类名-*/
    
16.         width:327px;
    
17.         clear:both;
    
18.         border-left:1px solid #cbcbcb;
    
19.         border-bottom:0;
    
20.         cursor:pointer;
    
21. }
    
22. .alabel        {  /*-各舌签标题所在的td的类名，当前舌签样式-*/
    
23.         height:22px;
    
24.         width:109px;
    
25.         background:url(bg_a.gif);
    
26.         text-align:center;
    
27.     padding-top:4px;
    
28. }
    
29. .nlabel        {   /*-各舌签标题所在的td的类名，非当前舌签样式-*/
    
30.         height:22px;
    
31.         width:109px;
    
32.         background:url(bg_n.gif);
    
33.         text-align:center;
    
34.     padding-top:4px;
    
35. }
    
36. .scontent        {  /*-内容表格的总样式类名-*/
    
37.         width:327px;
    
38.         height:200px;
    
39.         margin:0;
    
40.         padding:0;
    
41.         border:1px solid #cbcbcb;
    
42.         border-top:0;
    
43. }
    
44. -->
    
45. </style>
    
46. 
    
47. <table cellpadding="0" cellspacing="0" class="stable"><tr>
    
48. <td id="TabTitle" class="alabel" onmouseover="ShowTabs(0)">舌签标题</td>
    
49. <td id='TabTitle' class='nlabel' onmousemove='ShowTabs(1)'>舌签标题</td>
    
50. <td id='TabTitle' class='nlabel' onmousemove='ShowTabs(2)'>舌签标题</td>
    
51. </tr></table>
    
52. <table cellpadding=0 cellspacing=0 class="scontent">
    
53. <tbody id='Tabs' style='display:'> <tr><td>
    
54. 舌签内容，支持html代码，不要含有美元符号
    
55. </td></tr></tbody>
    
56. <tbody id='Tabs' style='display:none'> <tr><td>
    
57. 舌签内容，支持html代码，不要含有美元符号
    
58. </td></tr></tbody>
    
59. <tbody id='Tabs' style='display:none'> <tr><td>
    
60. 舌签内容，支持html代码，不要含有美元符号
    
61. </td></tr></tbody>
    
62. </td></tr> </table>
    

复制代码