jquery写的一个tab切换插件

追影

1. <!--tab切换图集-->
   
2. <style type="text/css">
   
3. .tab_nav{
   
4. width:100%;
   
5.   overflow: hidden
   
6. }
   
7. .tab_nav li {
   
8.   float: left;
   
9.   list-style: none;
   
10.   margin-right: 10px;
    
11.   cursor: pointer;
    
12.   padding: 2px 30px 2px 0px!important;
    
13.   
    
14. }
    
15. .link {
    
16.   cursor: pointer;
    
17.   color: #F00
    
18. }
    
19. 
    
20. .tab_div div {
    
21.   display: none;
    
22.   padding: 10px;
    
23. }
    
24. .tab_div {
    
25.   text-align: left;
    
26.   border: 1px #CCC solid;
    
27.   clear: both;
    
28.   margin-bottom:10px;
    
29. }
    
30. .cur {
    
31.   background: #000;
    
32.   color: #FFF
    
33. }
    
34. </style>
    
35. <script type="text/javascript">
    
36. $(document).ready(function() {
    
37.   //tab
    
38.     $("#setTab").setTab();
    
39.         try {
    
40.         $('.fancybox').fancybox();
    
41.     }
    
42.     catch(ex) {}
    
43.    
    
44. });
    
45.   
    
46. /*插件代码*/
    
47. (function ($) {
    
48.   $.fn.setTab = function () {
    
49.     var getTab=$(this),//this指向调用函数的ID
    
50.       panels = getTab.children("div.tab_div").children("div"),
    
51.       tabs = getTab.find("li");
    
52.   
    
53.     return this.each(function(){
    
54.       $(tabs).click(function(e) {
    
55.         var index = $.inArray(this, $(this).parent().find("li"));//this指向li
    
56.         if (panels.eq(index)[0]) {
    
57.           $(tabs).removeClass("cur");
    
58.           $(this).addClass("cur");
    
59.           panels.css("display", "none").eq(index).css("display", "block");
    
60.         }
    
61.       });
    
62.         
    
63.     });
    
64. }
    
65. })(jQuery);
    
66.   
    
67.   
    
68. </script>
    
69. <div id="setTab">
    
70. <ul class="tab_nav">
    
71.   <li class="cur">{$article.title}的图集</li>
    
72.   <li>{$article.title}的视频</li>
    
73.   <li>{$article.title}的文集</li>
    
74. </ul>
    
75. <div class="tab_div">
    
76.   <div style="display: block" class="che">
    
77.   
    
78.   {$article.teacher_pic}
    
79. 
    
80.   </div>
    
81.   <div>{$article.teacher_video}</div>
    
82.   <div>
    
83. {$article.teacher_wenji}
    
84.   </div>
    
85. </div>
    
86. </div>
    
87. </div>

复制代码