我需要你的帮助！
我希望在每个<li>成为最新版本时为其设置不同的className。
每次javascript函数属性className“tab-current”，我不想这样。
我想要的例子：
当用户点击第二个标签时，我希望className成为 制表电流2。
当用户点击第三个标签时，我希望className成为tab-current3
我希望你能理解我，我是法国的开发者，所以用英语解释这个很难。
这是我的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 );
感谢您的帮助。
答案 0 :(得分：0)
我认为您应该可以通过修改_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。