/*
 * 选项卡(jTab)插件
 * 江鸿宾(QQ33080907)
 * 最近修改：2016.07.26
 * 本插件只用于作者参与的项目，未经许可请勿转载
 */

//用法:
//html结构：<div class="tab"><ul><li class="current">标签1</li><li>标签2</li></ul><ul>内容1</ul><ul>内容2</ul></div>
//$(".tab").jTab();

(function ($) {
  "use strict";
  
  $.fn.jTab = function (options) {
    //默认属性或参数
    var defaults = {
      current: "current", //当前高亮的CSS类名
      event: "mouseover"  //触发事件
    };

    //调用时的参数覆盖默认参数
    var opts = $.extend(defaults, options);

    //绑定事件
    return this.each(function (index) {
      //选项卡所在ul标签
      var tab_ul = $(this).children("ul:first");
      //选项卡标签
      var tab_li = tab_ul.children("li");
      //设置标签样式
      tab_li.css({ cursor: "pointer", display: "inline-block", "text-align": "center" });
      //内容
      var content = tab_ul.nextAll();
      //初始显示隐藏（li标签的class为current，如果没有设置current则默认为第一个）
      var j = tab_li.index($("." + opts.current, $(this)));
      if (j === -1) {
        j = 0;
        tab_li.eq(j).addClass(opts.current);
      }
      content.hide().eq(j).show();
      //绑定事件
      tab_li.on(opts.event, function () {
        if (!$(this).hasClass(opts.current)) {
          //当前tab的索引
          var i = tab_li.index($(this));
          tab_li.removeClass(opts.current);
          $(this).addClass(opts.current);
          //content.hide().eq(i).fadeIn();
          content.hide().eq(i).show();
        }
      });
    });
  };
})(jQuery);