Au clic sur un onglet, la classe ‘before-active’ viendra se positionner sur l’élément frère le plus proche qui précède celui qui possède la classe ‘active’. Très utile pour styler des menus avec séparateurs.
<script type="text/javascript">
jQuery(function(){
jQuery('.nav-tabs li a').click(function (e) {
// Adding .before-active for CSS purpose
jQuery('.nav-tabs li').removeClass('before-active');
jQuery('.nav-tabs .active').prev('li').addClass('before-active');
});
});
</script>
<ul id="productTab" class="nav nav-tabs tab-list">
<li class="active"><a href="#avis" data-toggle="tab">${trans:m.catalog.frontoffice.tab-avis,ucf}</a></li>
<li><a href="#donnezavis" data-toggle="tab">${trans:m.catalog.frontoffice.tab-donnezavis,ucf}</a></li>
<li><a href="#plusinfos" data-toggle="tab">${trans:m.catalog.frontoffice.tab-plusinfos,ucf}</a></li>
<li><a href="#demos" data-toggle="tab">${trans:m.catalog.frontoffice.tab-demos,ucf}</a></li>
</ul>
.tab-list li {
background-image: url();
background-position: right 22px;
background-repeat: no-repeat;
}
.tab-list li:last-child,
.tab-list li.before-active{
background-image: none;
}