如何在此javascript代碼中歸因不同的類

Question

我需要你的幫助！

我想爲每個<li>當它變成當前屬性不同的className。 javascript函數每次都會爲className「tab-current」賦予屬性，我不希望這樣。我想要什麼

例子：

當第二個選項卡，在用戶點擊我想這一個className成爲 製表電流2。

當第三個選項卡，在用戶點擊我想是一個className成爲製表current3

我希望你能理解我，我是一個法國developper所以很難用英文解釋。

這是我的html代碼

<div class="tabs tabs-style-fillup"> 
       <nav> 
        <ul> 
         <li><a href="#section-fillup-1"></a></li> 
         <li><a href="#section-fillup-2"></a></li> 
         <li><a href="#section-fillup-3"></a></li> 
         <li><a href="#section-fillup-4"></a></li> 
         <li><a href="#section-fillup-5"></a></li> 
         <li><a href="#section-fillup-6"></a></li> 
        </ul> 
       </nav> 
      <div class="content-wrap"> 
       <section id="section-fillup-1"> 
        <ul> 
         <li>Assurer le conseil et la vente au client des services et produits (circuits, séjours, forfaits, locations proposés par les TO, billetterie, etc...)</li> 
         <li>Gérer les opérations techniques liées à la vente: réservation des prestations touristiques, émissions des billets, éditions des factures.</li> 
         <li>Veiller à assurer une qualité d'accueil au client et donner une image positive de l'entreprise.</li> 
         <li>Concevoir l'assemblage de prestations (transport, hébergement, restauration, animation) en vue de réaliser un forfait simple</li> 
        </ul> 
       </section> 
       <section id="section-fillup-2"> 
        <strong>Qualités :</strong> 
        <ul> 
         <li>Bonne élocution</li> 
         <li>Sens commercial</li> 
         <li>Dynamisme</li> 
         <li>Souriant et accueillant</li> 
        </ul> 
        <strong>Compétences :</strong> 
        <ul> 
         <li>Connaissance des destinations et de l'industrie du tourisme</li> 
         <li>Maitrise des outils professionnels (GDS...)</li> 
         <li>Maîtrise de l'anglais</li> 
         <li>Aptitude à la vente</li> 
        </ul> 
       </section> 
       <section id="section-fillup-3"> 
        <ul> 
         <li>Le recrutement se fait essentiellement à partir d'un BTS Tourisme</li> 
        </ul> 
       </section> 
       <section id="section-fillup-4"> 
        <ul> 
         <li>A partir du SMIC pour un débutant. En moyenne : 24K€/an.</li> 
        </ul> 
       </section> 
       <section id="section-fillup-5"> 
        <ul> 
         <li>Les agents de voyages, Travel Planners, responsables billetterie évoluent vers des postes de responsable des ventes, responsable clientèle, responsable  d’agence puis de direction</li> 
        </ul> 
       </section> 
       <section id="section-fillup-6"> 
        <ul> 
         <li>Les agents de voyages, Travel Planners, responsables billetterie évoluent vers des postes de responsable des ventes, responsable clientèle, responsable  d’agence puis de direction</li> 
        </ul> 
       </section> 
      </div> 
      </div> 
      <script src="http://www.efht.fr/beta/wp-content/themes/mirror-wp/tab/cbpFWTabs.js"></script> 
       <script> 
        (function() { 

        [].slice.call(document.querySelectorAll('.tabs')).forEach(function(el) { 
          new CBPFWTabs(el); 
         }); 

        })(); 
       </script> 

這裏是我的JavaScript：

;(function(window) { 

       'use strict'; 

       function extend(a, b) { 
        for(var key in b) { 
         if(b.hasOwnProperty(key)) { 
          a[key] = b[key]; 
         } 
        } 
        return a; 
       } 

       function CBPFWTabs(el, options) { 
        this.el = el; 
        this.options = extend({}, this.options); 
        extend(this.options, options); 
        this._init(); 
       } 

       CBPFWTabs.prototype.options = { 
        start : 0 
       }; 

       CBPFWTabs.prototype._init = function() { 
        // tabs elems 
        this.tabs = [].slice.call(this.el.querySelectorAll('nav > ul > li')); 
        // content items 
        this.items = [].slice.call(this.el.querySelectorAll('.content-wrap > section')); 
        // current index 
        this.current = -1; 
        // show current content item 
        this._show(); 
        // init events 
        this._initEvents(); 
       }; 

       CBPFWTabs.prototype._initEvents = function() { 
        var self = this; 
        this.tabs.forEach(function(tab, idx) { 
         tab.addEventListener('click', function(ev) { 
          ev.preventDefault(); 
          self._show(idx); 
         }); 
        }); 
       }; 

       CBPFWTabs.prototype._show = function(idx) { 
        if(this.current >= 0) { 
         this.tabs[ this.current ].className = this.items[ this.current ].className = ''; 
        } 
        // change current 
        this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0; 
        this.tabs[ this.current ].className = 'tab-current'; 
        this.items[ this.current ].className = 'content-current'; 
       }; 

       // add to global namespace 
       window.CBPFWTabs = CBPFWTabs; 

      })(window); 

感謝您的幫助。

Answer 1

我想你應該可以通過修改_show()功能的元素的索引追加到類名來做到這一點：

CBPFWTabs.prototype._show = function(idx) { 
    if(this.current >= 0) { 
     this.tabs[ this.current ].className = this.items[ this.current ].className = ''; 
    } 
    // change current 
    this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0; 
    this.tabs[ this.current ].className = 'tab-current' + (idx + 1); // <--- HERE 
    this.items[ this.current ].className = 'content-current'; 
}; 

由於指數在0開始，獲得「第一」標籤顯示1，您必須將1添加到idx。