轻松实现jquery选项卡切换效果

/** * [description] * @param {[type]} $ [description] * @return {[type]} [description] */(function($){ $.fn.alertMsg = function(options) { var defaults = {  mouseEvent: 'clcik',  msg: 'hello world' } var options = $.extend(defaults, options); var $this = $(this); $this.on(options.mouseEvent, function(e){  alert(options.msg); }) }})(jQuery)

<span id="test">test</span>$(function(){ $('#test').alertMsg({  mouseEvent : "click",   msg : "第一次写插件!"  });});

(function($){ // tabs 自定义的插件名称 $.fn.tabs = function(options) {  // 设置默认参数  var defaults = {   activeClass: 'active'   ...   }  // 对象扩展  var options = $.extend(defaults, options);  return $(this).each(function(){   // 编写相应实现代码  }) }})(jQuery)

<div id="tab"> <ul>  <li>选项1</li>  <li>选项2</li>  <li>选项3</li>  <li>选项4</li> </ul> <div id="tabCon" class="tab-con">  <div>1的内容</div>  <div>2的内容</div>  <div>3的内容</div>  <div>4的内容</div> </div></div>

(function($){ $.fn.tabs = function(options) {   var defaults = {    Event: 'click',    activeClass: 'active'   }   var options = $.extend(defaults, options);   return $(this).each(function(){    var $thisTab = $(this).find('ul');    var $tabCon = $thisTab.siblings('div');    $tabCon.find('div').each(function(){     $(this).hide();    });    $thisTab.find('li:first').addClass(options.activeClass);    $tabCon.find('div:first').show();    $thisTab.find('li').each(function(index){     $(this).on(options.Event, function(){      $(this).siblings().removeClass(options.activeClass);      $(this).addClass(options.activeClass);      $tabCon.find('div').eq(index).show().siblings().hide();     });         });   });  } })(jQuery)

 $('#tab').tabs({  activeClass: 'active' });