Il piccolo script che presento oggi è di facilissima realizzazione e di utilizzo. Consente di creare un piccolo div con navigazione a tab molto facilmente ed utilizzando il framework jQuery.
La realizzazione è molto semplice, il seguente codice è quello necessario:
<div class="tabs">
<ul class="tabNavigation">
<li><a href="#message">Send a message</a></li>
<li><a href="#shareFile">Share a file</a></li>
<li><a href="#arrange">Arrange a meetup</a></li>
</ul>
<div id="message">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div id="shareFile">
<p>Sed do eiusmod tempor incididunt.</p>
</div>
<div id="arrange">
<p>Ut enim ad minim veniam</p>
</div>
</div>
$(function () {
var tabContainers = $('div.tabs > div');
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
Ovviamente il tutto dovrà essere “migliorato” da un buon CSS!
Un esempio potete vederlo alla seguente pagina: http://jqueryfordesigners.com/demo/tabs.html
Via | jQuery for Designers