使用JavaScript怎么實現一個選項卡插件

使用JavaScript怎么實現一個選項卡插件？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

實現插件的幾個注意點：

（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, (item, index) => {
  item.addEventListener(this.triggerEvent, () => {
   this.showIndex = index;
   this.change();
  });
  });
 }
 }
 window.Tab = Tab;
})();

使用方法：

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

第二種方法是現在常用的方法，因為它可以傳遞很多參數。可以根據需求，設置默認要傳遞的參數，將這個選項卡插件做的更完善。

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。