JavaScript插件如何实现Tab选项卡效果

科技

.tab {
 width: 300px;
}

.tab .tab-nav {
 height: 30px;
}

.tab .tab-nav li {
 float: left;
 margin-right:5px;
 background-color:#767676;
 border-radius:3px 3px 0 0;
}

.tab .tab-nav li a{
 display:block;
 height:30px;
 padding:0 20px;
 color: white;
 line-height:30px;
 text-decoration: none;
}

.tab .tab-nav .active {
 background-color: #fff;

}

.tab .tab-nav .active a{
 color: #777;
}

.tab .content-wrap{
 background-color: white;
 padding:5px;
 height:200px
}

.tab .content-wrap .content-item {
 position:absolute;
 height: 200px;
 display: none;
}

.tab .content-wrap .current {
 height: 200px;
 display: block;
}

最后将插件代码列出来，在代码里面已经写了很详细的注释：

/**
 * Created by Wu.lin on 2017/11/12.
 */
(function($){

 var Tab = function(tab, _params) {
 var _this = this;

 //保存单个Tab组件
 this.tab = tab;

 this.params = _params;

 //默认配置参数
 this.config = {
  //用来定义鼠标的出发类型 "click"/mouseover
  "triggerType": "mouseover",

  //用来定义内容切换效果，直接切换/淡入淡出
  "effect": "default",

  //默认展示第几个Tab
  "invoke": "1",

  //用来定义Tab是否自动切换，当指定了事件间隔，就表示自动切换，并指定了切换间隔
  "auto": false
 };

 //如果配置参数存在，就扩展默认的配置参数
 if(this.params){
  $.extend(this.config, this.params);
 }

 //保存Tab标签列表，以及对应的内容列表
 this.tabItem = this.tab.find("ul.tab-nav li");
 this.contentItem = this.tab.find("div.content-wrap .content-item");

 //保存配置参数
 var config = this.config;

 if(config.triggerType === "click") {
  this.tabItem.bind(config.triggerType, function() {
  _this.invoke($(this));
  });

 } else {
  this.tabItem.mouseover(function(){
  _this.invoke($(this));
  });
 }

 //自动切换功能
 if(config.auto) {
  this.timmer = null;

  //计数器
  this.loop = 0;

  this.autoPlay();

  this.tab.hover(function() {
  window.clearInterval(_this.timmer);
  }, function() {
  _this.autoPlay();
  });
 }

 //设置默认显示第几个Tab
 if(config.invoke > 1) {
  this.invoke(this.tabItem.eq(config.invoke - 1));
 }


 };

 Tab.prototype = {

 //事件驱动函数
 invoke: function(currentTab) {

  /**
  * 1、执行Tab选中状态，当前选中Tab加上Active,
  * 2、切换对应Tab内容，根据配置参数effect参数default|fade
  */

  var index = currentTab.index();
  var conItem = this.contentItem;

  //Tab切换
  currentTab.addClass("active").siblings().removeClass("active");

  //内容区域切换
  var effect = this.config.effect;

  if(effect === "fade") {
  conItem.eq(index).fadeIn().siblings().fadeOut();
  } else {
  conItem.eq(index).addClass("current").siblings().removeClass("current");
  }

  //注意，如果配置了自动切换，记得把当前的loop值设置为当前的Tab的index
  if(this.config.auto) {
  this.loop = index;
  }
 },

 //自动间隔切换
 autoPlay: function() {

  var _this_ = this,
  tabItems = this.tabItem, //临时保存Tab列表
  tabLength = tabItems.size(),
  config = this.config;

  this.timmer = window.setInterval(function() {
  _this_.loop++;
  if(_this_.loop >= tabLength) {
   _this_.loop = 0;
  }

  tabItems.eq(_this_.loop).trigger(config.triggerType);
  }, config.auto);

 }
 };

 Tab.init = function(tabs) {
 var _this_ = this;
 tabs.each(function() {
  new _this_($(this));
 });
 // var tab = new Tab($(".js-tab").eq(0));
 };

 //注册成JQuery方法
 $.fn.extend({
 etab: function(_param) {
  this.each(function () {
  new Tab($(this), _param);
  });
  return this;
 }
 });

 window.Tab = Tab;

})(jQuery);

关于“JavaScript插件如何实现Tab选项卡效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

• 建站热线：13518219792
• 
  微信扫一扫在线咨询
• QQ客服：
• 案 例
• 价 格