- <!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>滑動門改爲選項卡</title>
- <style>
- *{
- padding:0;margin:0;
- font-size:12px;
- }
- #main{
- margin:20px;
- }
- ul{
- width:600px;
- }
- #tab li{
- list-style:none;
- float:left;
- text-align:center;
- padding:0;
- }
- #tab a{
- display:block;
- text-decoration:none;
- width:94px;
- line-height:24px;
- }
- #cont{
- clear:both;
- border:1px solid blue;
- border-top:0;
- width:562px!important;
- width:564px;
- height:190px;
- overflow-y:hidden;
- }
- .common{
- margin:5px;
- }
- .common li{
- list-style:none;
- padding-left:14px!important;
- padding-left:0;
- padding-top:4px;
- }
- .common li a{
- text-decoration:none;
- }
- .common li a:hover{
- color:red;
- }
- .on{
- url(http: //p1.mb5u.com/texiao/1/tabs3.gif) no-repeat left bottom;
- }
- .off{
- url(http: //p1.mb5u.com/texiao/1/tabs2.gif) no-repeat left bottom;
- }
- </style>
- <script>
- function $(ID){
- return document.getElementById(ID)
- }
- function showTab(ID){
- for(var i=1;i<7;i++){
- if(ID==i){
- $('tab'+i).blur();
- $("tab"+i).className="on";
- $("cont"+i).style.display="block";
- }else{
- $("tab"+i).className="off";
- $("cont"+i).style.display="none";
- }
- }
- return false;
- }
- </script>
- </head>
- <body>
- <div id="main">
- <div id="tab">
- <ul>
- <li><a href="void(0)"< /span> id="tab1" class="on" onclick="showTab('1')">C#源代碼</a></li>
- <li><a href="void(0)"< /span> id="tab2" class="off" onclick="showTab('2')">VB源代碼</a></li>
- <li><a href="void(0)"< /span> id="tab3" class="off" onclick="showTab('3')">VC源代碼</a></li>
- <li><a href="void(0)"< /span> id="tab4" class="off" onclick="showTab('4')">JQUERY</a></li>
- <li><a href="void(0)"< /span> id="tab5" class="off" onclick="showTab('5')">Delphi</a></li>
- <li><a href="void(0)"< /span> id="tab6" class="off" onclick="showTab('6')">JAVA源代碼</a></li>
- </ul>
- </div>
- <div id="cont" >
- <div id="cont1" class="common" style="display:block;">
- <li><a href="#" target="_blank">30多個C#基礎學習實例</a></li>
- </div>
- <div style="display:none;" id="cont2" class="common">
- <li><a href="#" target="_blank">C#圖片/相冊管理程序代碼</a></li>
- </div>
- <div style="display:none;" id="cont3" class="common">
- <li><a href="#" target="_blank">VB仿Photoshop曲線調整圖像亮度源程序</a></li>
- </div>
- <div style="display:none;" id="cont4" class="common">
- <li><a href="#" target="_blank">VB仿RealonePlayer播放器的窗體界面</a></li>
- </div>
- <div style="display:none;" id="cont5" class="common">
- <li><a href="#" target="_blank">30多個C#基礎學習實例</a></li>
- </div>
- <div style="display:none;" id="cont6" class="common">
- <li><a href="#" target="_blank">Farbtastic jQuery圓形網頁取色插件</a></li>
- </div>
- </div>
- </div>
- </body>
- </html>