JAVASCRIPT - JQUERY $(document).ready( function() { $('.tabs a').each( function() { $(this).click( function() { $('.tab-content').fadeIn("slow").hide();; var tabSelector = $(this).attr('tabSelector'); $('#' + tabSelector).show(); }); }); }); // script per aggiungere-rimuovere la classe "activeTab" sul tab $(document).ready( function() { $(".tabs a").click( function() { $(".tabs a").removeClass("activeTab"); $(this).addClass("activeTab"); }); }); HTML <div class="tabs"> <ul class="tab-menu" > <li><a href="javascript:{}" class="activeTab" tabSelector="tab1">TAB1</a></li> <li><a href="javascript:{}" tabSelector="tab2" >TAB2</a></li> <li><a href="javascript:{}" tabSelector="tab3" >TAB3</a></li> <li><a href="javascript:{}" tabSelector="tab4" >TAB4</a></li> <li><a href="javascript:{}" tabSelector="tab5" >TAB5</a></li> <li><a href="javascript:{}" tabSelector="tab6" >TAB6</a></li> <li><a href="javascript:{}" tabSelector="tab7" >TAB7</a></li> <li><a href="javascript:{}" tabSelector="tab8" >TAB8</a></li> </ul> </div> <div class="tab-content activeTab" id="tab1"> </div> <div class="tab-content" id="tab2" > </div> <div class="tab-content" id="tab3" > </div> <div class="tab-content" id="tab4" > </div> <div class="tab-content" id="tab5" > </div> <div class="tab-content" id="tab6" > </div> <div class="tab-content" id="tab7" > </div> <div class="tab-content" id="tab8" > </div>