本文例項為大家分享了JS實現選項卡外掛的2種寫法，供大家參考，具體內容如下

實現外掛的幾個注意點：

（1）定義一個固定的html結構，比如選項卡的標題的標籤為為li，每個選項卡的內容的標籤為div等等；
（2）選中時的樣式提前確定；
（3）最好先用簡單的JS實現選項卡的功能，再改為外掛的模式。

html結構如下：

<style>
 * {
 margin: 0;
 padding: 0;
 }

 ul {
 list-style: none;
 }

 #tabBox {
 box-sizing: border-box;
 margin: 20px auto;
 width: 500px;
 }

 .navBox {
 display: flex;
 position: relative;
 top: 1px;
 }

 .navBox li {
 box-sizing: border-box;
 margin-right: 10px;
 padding: 0 10px;
 line-height: 35px;
 border: 1px solid #999;
 cursor: pointer;
 }

 .navBox li.active {
 border-bottom-color: #FFF;
 }

 #tabBox>div {
 display: none;
 box-sizing: border-box;
 padding: 10px;
 height: 150px;
 border: 1px solid #999;
 }

 #tabBox>div.active {
 display: block;
 }
 </style>
 
 <div id="tabBox">
 <ul class="navBox">
 <li class="active">程式設計</li>
 <li>讀書</li>
 <li>運動</li>
 </ul>
 <div class="active">程式設計使我快樂</div>
 <div>讀書使我幸福</div>
 <div>運動使我健康</div>
</div>

先用JS實現選項卡的功能：

let len = liList.length;
 for(let i = 0; i < len; i++) {
  liList[i].index = i;
  liList[i].onclick = function() {
  for(let j = 0; j < len; j++) {
   if(j === this.index) {
   liList[j].className = 'active';
   contentList[j].className = 'active';
   }
   else{
   liList[j].className = '';
   contentList[j].className = '';
   }
  }
 };
}

實現外掛的第一種方法：jQuery

利用$.fn.extend方法，在jQuery上擴充套件一個選項卡功能的方法：

(function($){
 function clickLi() {
 let $this = this,$navBox = $this.find('.navBox'),$liList = $navBox.find('li'),$contentList = $this.find('div');

 $liList.click(function(){
  let $this = $(this),index = $this.index();
  $this.addClass('active').siblings().removeClass('active');
  $contentList.eq(index).addClass('active').siblings().removeClass('active');
 });
 }

 $.fn.extend({
 tabClick: clickLi
 });
})(jQuery);

使用方法：

let $tabBox = $('#tabBox');
$tabBox.tabClick();

實現外掛的第二種方法：class

利用ES6中的class類，建立一個選項卡類Tab，並新增屬性和方法，並且可以多引數傳遞實現選項卡：

(function(){
 class Tab {
 constructor(selector,options) {
  // 處理第一個引數
  if(!selector)
  throw new ReferenceError('The first selector parameter must be passed~~');
  if(typeof selector === 'string')
  this.container = document.querySelector(selector);
  else if(selector.nodeType)
  this.container = selector;

  this.initialParams(options);

  this.navBox = this.container.querySelector('.navBox'),this.liList = this.navBox.querySelectorAll('li'),this.contentList = this.container.querySelectorAll('div'),this.count = this.liList.length;
  
  this.change();
  this.handleLi();
 }

 // 初始化引數
 initialParams(options) {
  let _default = {
  showIndex: 0,triggerEvent: 'click'
  };

  for(let key in options) {
  if (!options.hasOwnProperty(key)) break;
  _default[key] = options[key];
  }

  // 把資訊掛載到例項上
  for (let key in _default) {
 if (!_default.hasOwnProperty(key)) break;
 this[key] = _default[key];
 }
 }

 // 切換標題
 change() {
  [].forEach.call(this.liList,(item,index) => {
  if(index === this.showIndex) {
   this.liList[index].className = 'active';
   this.contentList[index].className = 'active';
   return;
  }
  this.liList[index].className = '';
  this.contentList[index].className = '';
  });
 }

 // 繫結標題對應的事件
 handleLi() {
  [].forEach.call(this.liList,index) => {
  item.addEventListener(this.triggerEvent,() => {
   this.showIndex = index;
   this.change();
  });
  });
 }
 }
 window.Tab = Tab;
})();

使用方法：

new Tab('#tabBox',{
 showIndex: 2,triggerEvent: 'mouseenter'
});

第二種方法是現在常用的方法，因為它可以傳遞很多引數。可以根據需求，設定預設要傳遞的引數，將這個選項卡外掛做的更完善。

如果大家還想深入學習，可以點選兩個精彩的專題：javascript選項卡操作方法彙總 jquery選項卡操作方法彙總

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。