使用Jquery实现滑动Tabs页实例

前段时间做一个项目，其中界面部分要用到的tabs页签网上已经有很多很多现成的可以用，也用了下jquery-ui里面的tabs，感觉大了点，自己的需求并不复杂，还是自己动手写写吧，目的为了让html更干净点。 
纯属记录自己写的东西，先来个图 
 

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. } 

　　jquery代码： 

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> 

简简单单，效果就达到了 
//tabs插件-小色帝稍作改进 

1. 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. });
   18. 原文：web开发网http://www.software8.co/wzjs/jquery/2123.html

转载于:https://www.cnblogs.com/jialisoftwo/archive/2012/12/27/2835761.html