js開發(fā)插件實(shí)現(xiàn)tab選項(xiàng)卡效果

更新時(shí)間：2021年09月18日 14:34:50 作者：snow_small

這篇文章主要為大家詳細(xì)介紹了js開發(fā)插件實(shí)現(xiàn)tab選項(xiàng)卡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js插件實(shí)現(xiàn)tab選項(xiàng)卡效果的具體代碼，供大家參考，具體內(nèi)容如下

一、搭建頁(yè)面

<div class="tab" data-config='{ // 在標(biāo)簽里自定義配置
   "triggerType": "click",
   "effect": "fade",
   "invoke": 2,
   "auto": 1000
     }'>
  <ul class="tab-nav">
   <li class="active"><a href="javascript:void(0);" >新聞</a></li>
   <li><a href="javascript:void(0);" >娛樂</a></li>
   <li><a href="javascript:void(0);" >電影</a></li>
   <li><a href="javascript:void(0);" >科技</a></li>
  </ul>
  <div class="content">
   <div class="content-item current">
    <img src="./images/pic1.jpg">
   </div>
   <div class="content-item">
    <img src="./images/pic2.jpg">
   </div>
   <div class="content-item">
    <img src="./images/pic3.jpg">
   </div>
   <div class="content-item">
    <img src="./images/pic4.jpg">
   </div>
  </div>
</div>

二、基礎(chǔ)樣式

* {
 margin: 0;
 padding: 0;
}
ul, li {
 list-style: none;
}
body {
 background: #323232;
 font-size: 12px;
 padding: 100px;
}
.tab {
 width: 300px;
}
.tab .tab-nav {
 height: 30px;
}
.tab .tab-nav li {
 display: inline-block;
 margin-right: 5px;
 background: #767676;
 border-radius: 3px 3px 0 0;
}
.tab .tab-nav li a {
 display: block;
 text-decoration: none;
 height: 30px;
 line-height: 30px;
 padding: 0 20px;
 color: #fff;
}
.tab .tab-nav li.active {
 background: #fff;
 color: #777;
}
.tab .tab-nav li.active a {
 color: #777;
}
.tab .content {
 background: #fff;
 height: 200px;
 padding: 5px;
}
.tab .content-item {
 position: absolute;
 display: none;
}
.tab .content img {
 width: 290px;
 height: 200px;
}
.tab .content .current {
 display: block;
}

三、效果

四、選項(xiàng)卡開發(fā)的思維結(jié)構(gòu)圖：需要對(duì)象、參數(shù)、和方法

五、js實(shí)戰(zhàn)

(function () {
 function Tab (tab)
 {
  this.tab = tab;
  var _this_ = this;
  // 默認(rèn)配置參數(shù)，屬性名為雙引號(hào)，不然parseJSON轉(zhuǎn)義不成功
  this.config = {
   // 用來定義鼠標(biāo)的觸發(fā)類型，是click還是mouseover
   "triggerType": "mouseover",
   // 用來定義內(nèi)容切換效果，是直接切換，還是淡入淡出效果
   "effect": "default",
   // 默認(rèn)展示第幾個(gè)tab
   "invoke": 1,
   // 用來定義tab是否自動(dòng)切換，指定時(shí)間為多久切換
   "auto": false
  }
  // 如果配置存在，就擴(kuò)展掉原來的配置，$.extend合并
  if (this.getConfig()) {
   $.extend(this.config, this.getConfig());
  }
  // 鼠標(biāo)觸發(fā)功能
  var config = this.config;   // 存儲(chǔ)配置，this.config會(huì)每次查找
  this.liItem = this.tab.find('.tab-nav li');   // 獲取li
  this.contentItem = this.tab.find('.content div');   // 獲取內(nèi)容
  // 判斷如果是click。。當(dāng)操作時(shí)，執(zhí)行invoke方法進(jìn)行切換
  if (config.triggerType === 'click') {
   this.liItem.click(function () {
    _this_.invoke($(this));
   });
  } else {
   this.liItem.mouseover(function () {
    _this_.invoke($(this));
   });
  }

  // 自動(dòng)切換功能
  if (this.config.auto) {
   this.timer = null;
   this.count = 0;   // 計(jì)數(shù)器
   this.autoplay();
   // 當(dāng)鼠標(biāo)浮在上面停止，移開時(shí)繼續(xù)
   this.tab.hover(function () {
    clearInterval(_this_.timer);   // 此時(shí)的this是this.tab
   }, function () {
    _this_.autoplay();
   })
  }

  // 默認(rèn)顯示第幾個(gè)
  if (this.config.invoke > 1) {
   this.invoke(this.liItem.eq(this.config.invoke - 1));   // 直接切換
  }
 }

 Tab.prototype = {
  // 獲取配置參數(shù)
  getConfig: function () {
   //把tab元素上的data-config中的內(nèi)容拿出來
   var config = this.tab.attr('data-config');
   if (config && config != '') {
    return $.parseJSON(config);   // 將json對(duì)象轉(zhuǎn)換為js對(duì)象
   } else {
    return null;
   }
  },
  // 獲取傳入的li，進(jìn)行切換
  invoke: function (li) {
   var index = li.index();   // 獲取li的索引
   var liItem = this.liItem;
   var contentItem = this.contentItem;
   
   li.addClass('active').siblings().removeClass('active');   // 自身加active其他兄弟都去除
   // 淡入淡出還是默認(rèn)
   var effect = this.config.effect;
   if (effect === 'default') {
    contentItem.eq(index).addClass('current').siblings().removeClass('active');
   } else {
    contentItem.eq(index).fadeIn().siblings().fadeOut();
   }
   // 當(dāng)自動(dòng)切換時(shí)，要更改count，否則每次都從頭開始
   this.count = index;
  },
  // 自動(dòng)切換
  autoplay: function () {
   var _this_ = this;
   var length = this.liItem.length;   // 獲取長(zhǎng)度
   this.timer = setInterval(function() {  
    _this_.count ++;   // 計(jì)數(shù)加一，此時(shí)的this是this.timer
    if (_this_.count >= length) {
     _this_.count = 0;
    }
    // 第幾個(gè)li觸發(fā)事件
    _this_.liItem.eq(_this_.count).trigger(_this_.config.triggerType);
   }, this.config.auto);
  }
 }

 window.Tab = Tab;   // 將Tab注冊(cè)為window對(duì)象，不然外部無法訪問  

})();

六、調(diào)用

// 將第一個(gè)tab傳給Tab類
var tab = new Tab($('.tab').eq(0));

七、優(yōu)化，當(dāng)有多個(gè)tab時(shí)，不用new多個(gè)

1、第一種通過init

// 通過init初始化
 Tab.init = function (tabs) {
  tabs.each(function () {
   new Tab($(this));
  });
 }

調(diào)用

Tab.init($('.tab'));

2、第二種通過注冊(cè)為jquery方法

// 注冊(cè)為jquery方法
 $.fn.extend({
  tab: function () {
   this.each(function () {   // 這個(gè)this是誰調(diào)用的tab方法
    new Tab($(this));     // 這個(gè)this是each過的li
   });
   return this;   // 鏈?zhǔn)讲僮?
  }
 })

調(diào)用