Two Ways of Writing JS Implementation Tab Plug ins (jQuery and class)

In this paper, we share two ways to write JS tab plug-ins for your reference. The specific contents are as follows

Several points to pay attention to when implementing plug-ins:

(1) Define a fixed html structure, such as the label of the title of the tab is li, the label of the content of each tab is div, etc.;
(2) The selected style is determined in advance;
(3) It is best to use simple JS to realize the function of tabs first, and then change to plug-in mode.

The structure of html is as follows:

<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"> Programming </li>
 <li> Reading </li>
 <li> Sports </li>
 </ul>
 <div class="active"> Programming makes me happy </div>
 <div> Reading makes me happy </div>
 <div> Exercise keeps me healthy </div>
</div>

First, use JS to realize the function of tabs:

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 = '';
   }
  }
 };
}

The first way to implement plug-ins: jQuery

A way to extend 1 tab functionality on jQuery using the $. fn. extend method:

(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);

Usage:

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

The second way to implement plug-ins: class

Using the class class in ES6, create a tab class Tab, add properties and methods, and implement tabs by passing multiple parameters:

(function(){
 class Tab {
 constructor(selector, options) {
  //  Handle the first 1 Parameters 
  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();
 }

 //  Initialization parameter 
 initialParams(options) {
  let _default = {
  showIndex: 0,
  triggerEvent: 'click'
  };

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

  //  Mount information on an instance 
  for (let key in _default) {
 if (!_default.hasOwnProperty(key)) break;
 this[key] = _default[key];
 }
 }

 //  Toggle Title 
 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 = '';
  });
 }

 //  Bind the event corresponding to the title 
 handleLi() {
  [].forEach.call(this.liList, (item, index) => {
  item.addEventListener(this.triggerEvent, () => {
   this.showIndex = index;
   this.change();
  });
  });
 }
 }
 window.Tab = Tab;
})();

Usage:

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

The second method is commonly used now, because it can pass many parameters. You can set the default parameters to pass according to your needs, and make this tab plug-in more perfect.

If you want to learn more, you can click on two wonderful topics: javascript tab operation method summary jquery tab operation method summary