Tagprev

[jQuery] Ajouter une classe ‘before-active’ sur l’élément frère qui précède celui qui possède la classe ‘active’

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.

before-active


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

[jQuery] Reporter le libellé de la balise label dans le champ input, select, ou textarea qui lui est associé dans un formulaire

Simulation : http://jsfiddle.net/frontenddeveloper/F4LGN/

.parents('select').prev('label') est bien-sûr à modifier en fonction de l’emplacement de la balise label dans le dom.

[jQuery] Créer un effet ‘pointillés’ après des libellés avec width et prev

Simulation : http://jsfiddle.net/frontenddeveloper/VXg2D/597/

© 2020 devfrontend.info

Theme by Anders NorénUp ↑