DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jquery實現的tab切換效果
jquery實現的tab切換效果
編輯:JavaScript綜合知識     

 

以下是源代碼:

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 2      <html xmlns="http://www.w3.org/1999/xhtml"> 
 3      <head>  
4      <title>div切換--柯樂義</title> 
 5      <script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>  
6      <!--演示內容開始--> 
 7      <style type="text/css"> 
 8      *{margin:0;padding:0;list-style-type:none;} 
 9      a,img{border:0;}
 10      body{background:#e3e3e3;height:100%;font:normal normal 12px/24px "Microsoft yahei", Arial;padding-bottom:30px;} 
11      a{color:#333;text-decoration:none;}
 12      a:hover{color:#093;text-decoration:none;}
 13      #title{width:300px;margin:3% auto 0;}
 14      #title h2{font-size:18px;}
 15      #wrapper{width:980px;margin:0 auto;background:#f8f8f8;border:1px solid #a3a3a3;padding:20px 20px 50px;border-radius:5px;-moz-border-radius:5px;}
 16      #wrapper h3{color:#333;font-size:14px;text-align:center;margin:20px 0;} 
17      /* box */
 18      .box{width:400px;margin:10px auto 0;background:#fff;border:1px solid #d3d3d3;} 
19      .tab_menu{overflow:hidden;} 
20      .tab_menu li{width:100px;float:left;height:30px;line-height:30px;color:#fff;background:#093;text-align:center;cursor:pointer;} 
21      .tab_menu li.current{color:#333;background:#fff;}
 22      .tab_menu li a{color:#fff;text-decoration:none;} 
23      .tab_menu li.current a{color:#333;} 
24      .tab_box{padding:20px;} 
25      .tab_box li{height:24px;line-height:24px;overflow:hidden;}
 26      .tab_box li span{margin:0 5px 0 0;font-family:"宋體";font-size:12px;font-weight:400;color:#ddd;}
 27      .tab_box .hide{display:none;}
 28      </style> <script type="text/javascript" src="jhttp://www.keleyi.com/keleyi/phtml/tabswitch/plus/query.tabs.js"></script>
 29      </head> 
30      <body>
 31      <script type="text/javascript"> 
32      $(function () {
 33      $('.demo2').Tabs({
 34      }); 
35      }); 
36      </script>
 37      <div id="wrapper"> 
38        
39      <h3>移動鼠標</h3>
 40      <div class="box demo2"> 
41      <ul class="tab_menu">
 42      <li class="current">jquery特效</li> 
43      <li>ASP.NET MVC</li>
 44      <li>javascript</li> 
45      <li>.NET</li> 
46      </ul> 
47      <div class="tab_box"> 
48      <div> 
49      <ul>
 50      <li><span>▪</span><a href="http://www.keleyi.com/a/bjac/768f469b95b61487.htm" title="" >單行文字間歇向上滾動</a></li>
 51      <li><span>▪</span><a href="http://www.keleyi.com/a/bjac/ed5eb8c2959c619e.htm" title="" >滾動頁面時DIV到達頂部時固定在頂部</a></li>
 52      <li><span>▪</span><a href="http://www.keleyi.com/a/bjac/a6d651710217f7a0.htm" title="" >使用jQuery UI修飾title屬性的氣泡懸浮框</a></li> 
53      <li><span>▪</span><a href="http://www.keleyi.com/a/bjac/bf0eb8c02085b10d.htm" title="" >jquery清空textarea等輸入框</a></li> 
54      <li><span>▪</span><a href="http://www.keleyi.com/a/bjac/939631bb07adb4dc.htm" title="" >jquery關燈特效</a></li>
 55      <li><span>▪</span><a href="http://www.keleyi.com/a/bjac/f4a6f78d74a251c5.htm" title="" >jquery根據滾動像素顯示隱藏頂部導航條</a></li>
 56      <li><span>▪</span><a href="http://www.keleyi.com/a/bjac/7e8897e5ec0849e9.htm" title="" >可改變大小DIV層</a></li>
 57      </ul>
 58      </div>
 59      <div class="hide"> 
60      <ul>
 61      <li><span>▪</span><a href="http://www.keleyi.com/a/bjac/eb6f273eb3c4cd07.htm" title="在ASP.NET MVC 3 中自定義AuthorizeAttribute時需要注意的頁面緩存問題" >
在ASP.NET MVC 3 中自定義AuthorizeAttribute時需要注意的頁面緩存問題</a></li>
 62      <li><span>▪</span><a href="http://www.keleyi.com/a/bjac/4064796bf1f324c8.htm" title="" >柯樂義留言板:ASP.NET MVC4實例</a></li> 
63      <li><span>▪</span><a href="http://www.keleyi.com/a/bjac/2916901353b081f1.htm" title="" >柯樂義留言板介紹</a></li>
 64      <li><span>▪</span><a href="http://www.keleyi.com/a/bjac/1a9487bbb1cbfc50.htm" title="MVC:從客戶端中檢測到有潛在危險的 Request.Form 值 的解決方法" >
MVC:從客戶端中檢測到有潛在危險的 Request.Form 值 的解決方法</a></li>
 65      <li><span>▪</span><a href="http://www.keleyi.com/a/bjac/101639c1eb1e991b.htm" title="" >Html.ActionLink重載</a></li>
 66      <li><span>▪</span><a href="http://www.keleyi.com/a/bjac/781ba7719ce323f.htm" title="" >ASP.NET MVC4中使用AJAX</a></li>
 67        
68      </ul> 
69      </div>
 70      <div class="hide">
 71      <ul> 72      <li><span>▪</span><a href="http://www.keleyi.com/a/bjac/e7f4d99c87604a8.htm" title="" >JS Trim()</a></li> 
73      <li><span>▪</span><a href="http://www.keleyi.com/a/bjac/5d7f4ac2efa72d30.htm" title="" >菜單滾動至頂部後固定</a></li>
 74      <li><span>▪</span><a href="http://www.keleyi.com/a/bjac/4f6d3873d0571805.htm" title="" >HTML5時鐘</a></li>
 75      <li><span>▪</span><a href="http://www.keleyi.com/a/bjac/ceb3c274df032ed5.htm" title="" >javascript onmousedown 事件</a></li> 
76      <li><span>▪</span><a href="http://www.keleyi.com/a/bjac/a6e756c811719fff.htm" title="" >在圖片上顯示左右箭頭的翻頁代碼</a></li>
 77      <li><span>▪</span><a href="http://www.keleyi.com/dev/f1d8e1f2f1c95bc0.htm" title="" >window.open的頁面刷新上層頁面</a></li> 
78        
79      </ul>
 80      </div>
 81      <div class="hide"> 
82      <ul> 
83      <li><span>▪</span><a href="http://www.keleyi.com/dev/beb40909418eb322.htm" title="" >WinForm 子窗體居中於父窗體代碼</a></li> 
84      <li><span>▪</span><a href="http://www.keleyi.com/dev/e52563d8ef0c81dd.htm" title="" >.NET常用正則表達式</a></li>
 85      <li><span>▪</span><a href="http://www.keleyi.com/dev/b9c46b55ed4b6e0d.htm" title="" >WinForm窗體最大化代碼</a></li>
 86      <li><span>▪</span><a href="http://www.keleyi.com/dev/887a9ad6042c676.htm" title="" >saveFileDialog 保存文件的後綴</a></li> 
87      <li><span>▪</span><a href="http://www.keleyi.com/dev/b6539b6c4146cc53.htm" title="" >ASP.NET驗證碼生成類</a></li> 
88      <li><span>▪</span><a href="http://www.keleyi.com/dev/cb809a6fd56325b8.htm" title="" >tabcontrol 切換(聚焦)選項卡</a></li>
 89      <li><span>▪</span><a href="http://www.keleyi.com/dev/908c6faf63374532.htm" title="" >.NET Winform 讓picturebox出現滾動條</a></li> 
90       
 91      </ul> 
92      </div> 
93      </div> 
94      </div> 
95      <a href="http://www.keleyi.com/keleyi/phtml/tabswitch/plus/index.htm">效果0</a> 
96      <a href="http://www.keleyi.com/keleyi/phtml/tabswitch/plus/1.htm">效果1</a> 
97      <a href="http://www.keleyi.com/keleyi/phtml/tabswitch/plus/3.htm">效果3</a> 
98      <a href="http://www.keleyi.com/keleyi/phtml/tabswitch/index.htm" target="_blank">其他效果</a> 
99      <a href="http://www.keleyi.com/a/bjac/88af29335890a287.htm" target="_blank">文章</a>
100      </div>
101       
102       
103       
104      </body>
105      </html>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved