Come sempre è necessario includere la libreria:

<script type="text/javascript" src="jquery.idTabs.min.js"></script> 

Naturalmente il mio consiglio è quello di scaricare la versione packed e di caricarla sul proprio spazio web, tra l'altro sempre sul sito dell'autore troverete un link 'view source' che mostra un pannello con il codice dell'ultima versione.

Una volta importata è sufficiente definire degli elementi <li> racchiusi fra tag <ul> e associare un id univoco (in realtà è possibile anche applicarlo a più elementi in un colpo solo)

Il codice di esempio base sarà quindi qualcosa tipo:

<div id="adv1" class="usual"> 
  <ul> 
    <li><a href="#t1">Tab 1</a></li> 
    <li><a href="#t2" class="selected">Tab 2</a></li> 
    <li><a href="#t3">Tab 3</a></li> 
  </ul> 
  <div id="t1" style="display: none; ">This is tab 1.</div> 
  <div id="t2" style="display: block; ">More content in tab 2.</div> 
  <div id="t3" style="display: none; ">Tab 3 is always last!</div> 
</div> 
 
<script type="text/javascript"> 
  var settings = { start:1, change:false }; 
  $("#adv1 ul").idTabs(settings,true); 
</script>

Risulta possibile anche delle operazioni più complesse, ossia possiamo creare una struttura di elementi <li> con univoci id e successivamente caricarci del contenuto complesso non solo formato da testo, ma di contenuto multimediale o a fronte di una richiesta ajax, come nell'esempio:

         <span id="adv3"> 
            <a href="#cake">Cake</a> vs <a href="#pie">Pie</a> 
            <p id="cake">Cake is great</p> 
            <p id="pie">So is pie</p> 
            <div id="message"></div> 
         </span> 
 
          <script type="text/javascript"> 
            $("#adv3").idTabs(function(id){
              switch(id){
                case "#cake": $("#message").html("It's so delicous and moist!"); break;
                case "#pie":  

                    $.ajax({
                        url: 'http://www.esempiosito.it/prova.php',
                        type: 'POST',
                        data: { q: 'esempio' },
                        dataType: 'json',
                        timeout: 45000,
                        cache: false,
                        error: function (XMLHttpRequest, textStatus, errorThrown) { 
                            
                            $("#message").html("error");
                        },
                        success: function (data, textStatus) {

                            $("#message").html("Pie from ajax, cooool");
                        }
                    });
                break;
              } return true;
            });
          </script>

C'è anche la possibilità di eseguire delle operazioni su eventi di hover piuttosto che il classico click, o slegando il contenuto dal classico tabbed pane ma andando a modificare alcune parti della pagina. In pratica come plugin risulta molto svincolato dal suo utilizzo e cerca (secondo me in maniera ottima) di rendere le cose più semplici per chi lo utilizza, ovviamente non è niente di estremamente nuovo ma penso che data la sua leggerezza e la sua duttilità possa essere considerato un ottimo plugin di cui considerarne tutti i lati positivi (e negativi) e se è il caso di annoverarlo fra i propri plugins.

Collegamenti esterni: jQuery | idTabs (jQuery) | idTabs (Author) | demo