氟塑料離心泵www.buybeng.com

使用Jquery實現滑動Tabs頁實例

1. <div class="tabs"> 
2.     <ul id="tabs"> 
3.         <li class="tab-nav">管理導航</li> 
4.         <li class="tab-nav-action">系統設置</li> 
5.         <li class="tab-nav">用戶管理</li> 
6.         <li class="tab-nav">內容管理</li> 
7.         <li class="tab-nav">其他管理</li> 
8.     </ul> 
9. </div> 
10. <div id="tabs-body" class="tabs-body"> 
11.     <div style="display:block"> 
12.     1111111 
13.     </div> 
14.     <div style="display:none"> 
15.     222222222 
16.     </div> 
17.     <div style="display:none"> 
18.     33333333333 
19.     </div> 
20.     <div style="display:none"> 
21.     4444444444 
22.     </div> 
23.     <div style="display:none"> 
24.     555555555555555 
25.     </div> 
26. </div> 
27. 　　樣式 
28.  
29. ?.tabs { 
30.     float:left; 
31.     background-image: url(themes/images/nav_bg.jpg); 
32.     width:100%; 
33. } 
34. .tabs ul  
35. { 
36.     list-style: none outside none; 
37.     margin: 0; 
38.     padding: 0; 
39. } 
40. .tabs ul li 
41. { 
42.     float: left; 
43.     line-height: 24px; 
44.     margin: 0; 
45.     padding: 2px 20px 0 15px; 
46. } 
47. .tab-nav{ 
48.      background: url(themes/images/manage_r2_c14.jpg) no-repeat; 
49.      cursor:pointer; 
50. } 
51. .tab-nav-action{ 
52.     background: url(themes/images/manage_r2_c13.jpg) no-repeat; 
53.     cursor:pointer; 
54. } 
55. .tabs-body 
56. { 
57.     border-bottom: 1px solid #B4C9C6; 
58.     border-left: 1px solid #B4C9C6; 
59.     border-right: 1px solid #B4C9C6; 
60.     float: left; 
61.     padding: 5px 0 0; 
62.     width: 100%; 
63. } 
64. .tabs-body div  
65. { 
66.     padding:10px; 
67. } 

1. ?<script type="text/javascript"> 
2.     $(document).ready(function () { 
3.         $("#tabs li").bind("click", function () { 
4.             var index = $(this).index(); 
5.             var divs = $("#tabs-body > div"); 
6.             $(this).parent().children("li").attr("class", "tab-nav");//將所有選項置為未選中 
7.             $(this).attr("class", "tab-nav-action"); //設置當前選中項為選中樣式 
8.             divs.hide();//隱藏所有選中項內容 
9.             divs.eq(index).show(); //顯示選中項對應內容 
10.         }); 
11.     }); 
12. </script> 

1. (function ($) { 
2.     $.fn.extend({ 
3.         qmTabs: function () { 
4.             var aTabBodys = $('#tabs-body > div'); 
5.             $(this).children("li").each(function (index) { 
6.                 $(this).click(function () { 
7.                     $(this).removeClass().addClass('tab-nav-action').siblings().removeClass().addClass('tab-nav'); 
8.                     aTabBodys.hide().eq(index).show(); 
9.                 }); 
10.             }); 
11.         } 
12.     }); 
13. })(jQuery); 
14. 使用方式 
15. $(document).ready(function () { 
16. $("#tabs").qmTabs(); 
17. });
    原文：web開發網http://www.software8.co/wzjs/jquery/2123.html

posted on 2012-12-27 15:16 你爸是李剛 閱讀(173) 評論(0)  編輯  收藏