Tabs jQuery

by Salvatore Rotondo

HTML

<div id="tabs-layout">
  <div id="labels">
    <a href="#tab1">Tab1</a>
    <a href="#tab2">Tab2</a>
    <a href="#tab3">Tab3</a>
  </div>
  <div id="tabs">
     <div class="active" data-tabname="tab1">
         Tab 1! Lorem Ipsum
     </div>
     <div data-tabname="tab2">
         Tab 2! Tizio Caio
     </div>
     <div data-tabname="tab3">
         Tab 3! Javascript l'inferno in terra
     </div>
  </div>
</div>

CSS

div#labels > a {
  display:inline-block;
  width:40px;
  border-radius:3px;
  background-color:#008000;
  color:#f1f1f1;
  text-decoration:none;
  padding:4px;
  text-align:center;
}

div#tabs {
  width:400px;
  height:250px;
  overflow:auto;
  background:#ddd;
  padding:10px;
}

div#tabs > div{
  display:none;
}

div#tabs > div.active{
  display:block;
}

JavaScript

(function($) {
  /** 
   * Questa parte e` facoltativa
   * Serve a raccogliere dalla url il parametro #nometab
   * cosi` da poter far aprire la pagina con una specifica
   * tab gia` in mostra al posto di un altra.
   * Se non la si vuole questa feature basta eliminare il 
   * blocco qui di seguito.
   */
	let pageHash = self.location.hash;

	if (pageHash != '') {
  		let selectedTab = pageHash.substr(1);
      $('#tabs > div').removeClass('active');
      $('#tabs > div[data-tabname="'+ selectedTab +'"]').addClass('active');
  }
  
  /**
   * Adesso registriamo l'azione dei tastini
   * Questo e` il funzionamento standard
   */
  let animationInProgress = false;
  
  $('#labels > a').click(function(e) {
  		//> Annullo l'azione del click del browser
  		e.preventDefault();
      
      //> Evitiamo che il click forsennato sulle label causi brutte cose
      if (animationInProgress) {
      		return;
      }
      
      //> Raccolgo il nome della tab richiesta e di quella gia` attiva
      let tabName = $(this).attr('href').substr(1); 
      let tabActive = $("#tabs > div.active").data('tabname');
      
      //> Se i nomi non coincidono proseguo ad attivare la tab richiesta
      if (tabName !== tabActive) {
      
      		//> faccio sparire quella attiva
          animationInProgress = true;
          
      		$("#tabs > div.active").fadeOut(300, function() {
          		//> e appena finita l'animazione avvio quella richiesta
          		$('#tabs > div[data-tabname="'+ tabName +'"]').fadeIn(300, function() {
              		//> Fine opera: riassegno il class .active
                  $('#tabs > div').removeClass('active');
      						$('#tabs > div[data-tabname="'+ tabName +'"]').addClass('active');
                  animationInProgress = false;
              });
          });
      }
  });

})(jQuery);