simple tab interface

CSS

tabs { width:100%;height:40px; } tabs li { float:left;margin-right:5px; } tabs li a { display:block; padding:3px 6px; text-decoration:none; } tabs li.on a { background:#DF29B9;color:#fff; } /* background for active tab */

.tab { display:none; } /* hide tabs */ .tab { border:1px solid #ddd;padding:15px;border-bottom:2px solid; }

XHTML

• Tab 1
• Tab 2
• Tab 3
• Tab 4
• Tab 5

Tab 1 contents Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste

Tab 2 contents Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste

Tab 3 contents Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste

Tab 4 contents Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste

Tab 5 contents Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste

$(function () {
 
var alltabs = $('div.tab');         //selector for all the tabs
var tabs = $('#tabs');              //selector for the tab menu
alltabs.first().show();             //show the first tab
tabs.find('li:first').addClass('on');       //add class 'on' to the first li to set the item to active
 
tabs.find('a').live('click', function() {
alltabs.hide()
tabs.find('li').removeClass('on')
$(this).parent().toggleClass('on')
var tabref = $(this).attr('rel')
$(tabref).fadeIn(500)
this.blur()
return false;
})
 
}); //end domready