使用JavaScript怎么實(shí)現(xiàn)一個(gè)選項(xiàng)卡插件-創(chuàng)新互聯(lián)

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

專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營銷網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)左云免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了超過千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

實(shí)現(xiàn)插件的幾個(gè)注意點(diǎn)：

（1）定義一個(gè)固定的html結(jié)構(gòu)，比如選項(xiàng)卡的標(biāo)題的標(biāo)簽為為li，每個(gè)選項(xiàng)卡的內(nèi)容的標(biāo)簽為div等等；
（2）選中時(shí)的樣式提前確定；
（3）好先用簡單的JS實(shí)現(xiàn)選項(xiàng)卡的功能，再改為插件的模式。

html結(jié)構(gòu)如下：

<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>運(yùn)動(dòng)</li>
 </ul>
 <div class="active">編程使我快樂</div>
 <div>讀書使我幸福</div>
 <div>運(yùn)動(dòng)使我健康</div>
</div>

先用JS實(shí)現(xiàn)選項(xiàng)卡的功能：

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

實(shí)現(xiàn)插件的第一種方法：jQuery

利用$.fn.extend方法，在jQuery上擴(kuò)展一個(gè)選項(xiàng)卡功能的方法：

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

實(shí)現(xiàn)插件的第二種方法：class

利用ES6中的class類，創(chuàng)建一個(gè)選項(xiàng)卡類Tab，并添加屬性和方法，并且可以多參數(shù)傳遞實(shí)現(xiàn)選項(xiàng)卡：

(function(){
 class Tab {
 constructor(selector, options) {
  // 處理第一個(gè)參數(shù)
  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();
 }

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

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

  // 把信息掛載到實(shí)例上
  for (let key in _default) {
 if (!_default.hasOwnProperty(key)) break;
 this[key] = _default[key];
 }
 }

 // 切換標(biāo)題
 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 = '';
  });
 }

 // 綁定標(biāo)題對應(yīng)的事件
 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'
});

第二種方法是現(xiàn)在常用的方法，因?yàn)樗梢詡鬟f很多參數(shù)?？梢愿鶕?jù)需求，設(shè)置默認(rèn)要傳遞的參數(shù)，將這個(gè)選項(xiàng)卡插件做的更完善。

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，的支持。

當(dāng)前名稱：使用JavaScript怎么實(shí)現(xiàn)一個(gè)選項(xiàng)卡插件-創(chuàng)新互聯(lián)
文章地址：http://www.jbt999.com/article32/eoosc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、外貿(mào)建站、微信公眾號、網(wǎng)站建設(shè)、服務(wù)器托管、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)