1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2.  
         
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3.  
         
  3. <head> 
    4.  
         
  4. <title>滑动门改为选项卡</title> 
    5.  
         
  5. <style> 
    6.  
         
  6. *{  
    7.  
         
  7. padding:0;margin:0;  
    8.  
         
  8. font-size:12px;  
    9.  
         
  9. }  
    10.  
         
  10. #main{  
    11.  
         
  11. margin:20px;  
    12.  
         
  12. }  
    13.  
         
  13. ul{  
    14.  
         
  14. width:600px;  
    15.  
         
  15. }  
    16.  
         
  16. #tab li{  
    17.  
         
  17. list-style:none;  
    18.  
         
  18. float:left;  
    19.  
         
  19. text-align:center;  
    20.  
         
  20. padding:0;  
    21.  
         
  21. }  
    22.  
         
  22. #tab a{  
    23.  
         
  23. display:block;  
    24.  
         
  24. text-decoration:none;  
    25.  
         
  25. width:94px;  
    26.  
         
  26. line-height:24px;  
    27.  
         
  27. }  
    28.  
         
  28. #cont{  
    29.  
         
  29. clear:both;  
    30.  
         
  30. border:1px solid blue;  
    31.  
         
  31. border-top:0;  
    32.  
         
  32. width:562px!important;  
    33.  
         
  33. width:564px;  
    34.  
         
  34. height:190px;  
    35.  
         
  35. overflow-y:hidden;  
    36.  
         
  36. }  
    37.  
         
  37. .common{  
    38.  
         
  38. margin:5px;  
    39.  
         
  39. }  
    40.  
         
  40. .common li{  
    41.  
         
  41. list-style:none;  
    42.  
         
  42. padding-left:14px!important;  
    43.  
         
  43. padding-left:0;  
    44.  
         
  44. padding-top:4px;  
    45.  
         
  45. }  
    46.  
         
  46. .common li a{  
    47.  
         
  47. text-decoration:none;  
    48.  
         
  48. }  
    49.  
         
  49. .common li a:hover{  
    50.  
         
  50. color:red;  
    51.  
         
  51. }  
    52.  
         
  52. .on{  
    53.  
         
  53. url(http: //p1.mb5u.com/texiao/1/tabs3.gif) no-repeat left bottom;  
    54.  
         
  54. }  
    55.  
         
  55. .off{  
    56.  
         
  56. url(http: //p1.mb5u.com/texiao/1/tabs2.gif) no-repeat left bottom;  
    57.  
         
  57. }  
    58.  
         
  58. </style> 
    59.  
         
  59. <script> 
    60.  
         
  60. function $(ID){  
    61.  
         
  61. return document.getElementById(ID)  
    62.  
         
  62. }  
    63.  
         
  63. function showTab(ID){  
    64.  
         
  64. for(var i=1;i<7;i++){  
    65.  
         
  65. if(ID==i){  
    66.  
         
  66. $('tab'+i).blur();  
    67.  
         
  67. $("tab"+i).className="on";  
    68.  
         
  68. $("cont"+i).style.display="block";  
    69.  
         
  69. }else{  
    70.  
         
  70. $("tab"+i).className="off";  
    71.  
         
  71. $("cont"+i).style.display="none";  
    72.  
         
  72. }  
    73.  
         
  73. }  
    74.  
         
  74. return false;  
    75.  
         
  75. }  
    76.  
         
  76. </script> 
    77.  
         
  77. </head> 
    78.  
         
  78. <body> 
    79.  
         
  79. <div id="main"> 
    80.  
         
  80. <div id="tab"> 
    81.  
         
  81. <ul> 
    82.  
         
  82. <li><a href="void(0)"< /span> id="tab1" class="on" onclick="showTab('1')">C#源代码</a></li> 
    83.  
         
  83. <li><a href="void(0)"< /span> id="tab2" class="off" onclick="showTab('2')">VB源代码</a></li> 
    84.  
         
  84. <li><a href="void(0)"< /span> id="tab3" class="off" onclick="showTab('3')">VC源代码</a></li> 
    85.  
         
  85. <li><a href="void(0)"< /span> id="tab4" class="off" onclick="showTab('4')">JQUERY</a></li> 
    86.  
         
  86. <li><a href="void(0)"< /span> id="tab5" class="off" onclick="showTab('5')">Delphi</a></li> 
    87.  
         
  87. <li><a href="void(0)"< /span> id="tab6" class="off" onclick="showTab('6')">JAVA源代码</a></li> 
    88.  
         
  88. </ul> 
    89.  
         
  89. </div> 
    90.  
         
  90. <div id="cont" > 
    91.  
         
  91. <div id="cont1" class="common" style="display:block;"> 
    92.  
         
  92. <li><a href="#" target="_blank">30多个C#基础学习实例</a></li> 
    93.  
         
  93. </div> 
    94.  
         
  94. <div style="display:none;" id="cont2" class="common"> 
    95.  
         
  95. <li><a href="#" target="_blank">C#图片/相册管理程序代码</a></li> 
    96.  
         
  96. </div> 
    97.  
         
  97. <div style="display:none;" id="cont3" class="common"> 
    98.  
         
  98. <li><a href="#" target="_blank">VB仿Photoshop曲线调整图像亮度源程序</a></li> 
    99.  
         
  99. </div> 
    100.  
         
  100. <div style="display:none;" id="cont4" class="common"> 
    101.  
         
  101. <li><a href="#" target="_blank">VB仿RealonePlayer播放器的窗体界面</a></li> 
    102.  
         
  102. </div> 
    103.  
         
  103. <div style="display:none;" id="cont5" class="common"> 
    104.  
         
  104. <li><a href="#" target="_blank">30多个C#基础学习实例</a></li> 
    105.  
         
  105. </div> 
    106.  
         
  106. <div style="display:none;" id="cont6" class="common"> 
    107.  
         
  107. <li><a href="#" target="_blank">Farbtastic jQuery圆形网页取色插件</a></li> 
    108.  
         
  108. </div> 
    109.  
         
  109. </div> 
    110.  
         
  110. </div> 
    111.  
         
  111. </body> 
    112.  
         
  112. </html> 
    113.