如何在此javascript代码中为不同的类赋予属性
我需要你的帮助 我想在每个类变为当前类时为其赋予不同的类名。 javascript函数属性className选项卡每次都是当前的，我不希望出现这种情况 我想要的示例： 当用户单击第二个选项卡时，我希望类名变成 表2 当用户单击第三个选项卡时，我希望类名变成tab-current3 我希望你能理解我，我是一个法国人，所以很难用英语解释 这是我的html代码如何在此javascript代码中为不同的类赋予属性,javascript,html,Javascript,Html,我需要你的帮助 我想在每个类变为当前类时为其赋予不同的类名。 javascript函数属性className选项卡每次都是当前的，我不希望出现这种情况 我想要的示例： 当用户单击第二个选项卡时，我希望类名变成 表2 当用户单击第三个选项卡时，我希望类名变成tab-current3 我希望你能理解我，我是一个法国人，所以很难用英语解释 这是我的html代码 <div class="tabs tabs-style-fillup"> <nav>
<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>
;( 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 );
谢谢您的帮助。我认为您可以通过修改_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';
};