ul,li,div{ margin:0; padding:0;}    
ul,li{ list-style:none;}    
.tabWrap{ width:450px; margin:0 auto 50px; overflow:hidden;}    
.tab{ background:#F93; overflow:hidden; width:450px;}    
.tab li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer; height:22px; line-height:22px;}    
.tab li.on{background:#F60;}    
.tabContent .p-content{ padding:20px; border:1px solid #ddd; border-top:0 none; }    
.tabContent .hide{ display:none;}  
 
 
 
 
 
       
           
            
选项卡1
   
            
选项卡2
   
            
选项卡3
   
           
           
            1111

调用的方式 如上图所示：

JS

// JavaScript Document 
/**   
用法：$("#ID名称").tabsPlug({switchingMode:"click"}); 
参数解释：switchingMode是面板切换的模式，如switchingMode:"mouseover"则鼠标移动至选项卡切换面板,默认为click。 
 
整体tabs骨架不变，依然是常用的结构如下： 
  
          
            
选项卡1
  
            
选项卡2
  
            
选项卡3
  
          
          
            1111  
            222  
            3333  
          
      
样式：此样式为默认无任何效果样式，可根据需要修改插件样式 
插件分为 1 对象级别插件 2 类别插件  
对象级别插件 调用的方式是：$("#ID名称").插件名称({switchingMode:"click"}); 或者 mouseover 
类别插件 ： $.定义的方法(); 
下面是对象级别插件  
*/ 
;(function($){  
    $.fn.extend({  
        "tabsPlug" : function(options){  
            var defaults = {switchingMode : "click"}; //定义默认切换模式 为click 也可以自定义mouseover 
            var opts = $.extend({},defaults,options); // 将defaults 和 options 参数合并到{}  
            var obj = $(this);  
            var currentIndex = 0;  
            $(".tab li:first",obj).addClass("on");  
            /* obj对象为当前调用该插件方法的对象。而后面bind里面的clickIndex = $(".tab li", obj).index($(this));意思就是obj对象下面的ul中的li元素索引index($(this))这里的$(this)则是在li元素中找到当前li元素的索引。 */ 
            $(".tab li").bind(opts.switchingMode,function(){  
                if(currentIndex != $(".tab li",obj).index($(this))){  
                    currentIndex = $(".tab li",obj).index($(this));   
                    $(".tab li",obj).removeClass("on")  
                    $(this).addClass("on");  
                    $(".p-content",obj).eq(currentIndex).show().siblings().hide();  
                }     
            });  
            return $(this);   
        }     
    })  
})(jQuery); 

在页面上这样调用 是：$("#ID名称").插件名称({switchingMode:"click"}); 或者 mouseover 默认情况下 $("#ID名称").插件名称() 即调用点击 当要调用鼠标移上去时候 这样调用就可以了 $("#ID名称").插件名称({switchingMode:"mouseover"});  其实对象级别插件的写法是 ;(function($){$.fn.extend({})})(jQuery)  这样的结构 当然还有一种写法 是 $.fn.插件名称！代码里面都有注释：下面我们来分析下这个插件代码：

1 ;(function($){$.fn.extend({})})(jQuery)  这样的固定结构 不用说啊 不明白的地方可以google下 然后定义一个函数 并且带了一个参数 目地是为了自定义事件类型！

2 var defaults = {switchingMode : "click"};这句话意思是 定义默认类型是点击事件  $("#ID名称").插件名称()  这样调用 默认情况下是点击  如果想要其他事件  可以这样调用 是：$("#ID名称").插件名称({switchingMode:"mouseover或者其他事件类型"});

3 var opts = $.extend({},defaults,options); 这句话代码的意思是 将defaults和options参数合并到{}这里面来 然后赋值给一个变量 同时改变了{}这里面的  结构.

4 $(".tab li").bind(opts.switchingMode,function(){
    if(currentIndex != $(".tab li",obj).index($(this))){
     currentIndex = $(".tab li",obj).index($(this)); 
     $(".tab li",obj).removeClass("on")
     $(this).addClass("on");
     $(".p-content",obj).eq(currentIndex).show().siblings().hide();
    } 
   }); 这样一段代码 bind里面的clickIndex = $(".tab li", obj).index($(this));意思就是obj对象下面的ul中的li元素索引index($(this))这里的$(this)则是在li元素中找到当前li元素的索引。接下来代码就不用多说啊！

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流