HTML
<div id="tab-outer"> <ul id="tab-wrapper"> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> <li><a href="#tab4">Tab 4</a></li> </ul> <div id="tab-body"> <div id="tab1">Konten...</div> <div id="tab2">Konten...</div> <div id="tab3">Konten...</div> <div id="tab4">Konten...</div> </div> </div>CSS
#tab-outer { position:relative; font:normal 12px Arial,Sans-Serif; } #tab-outer * { margin:0px 0px; padding:0px 0px; } #tab-wrapper { list-style:none; height:30px; } #tab-wrapper li { margin:0px 0px 0px 2px; float:left; font-weight:bold; } #tab-wrapper li a { display:block; padding:0px 15px; line-height:30px; text-decoration:none; color:white; background-color:#CD4A07; } #tab-wrapper li.active a { background-color:#A23E0D; } #tab-body > div { background-color:#A23E0D; color:white; padding:10px 15px; border-bottom:4px solid #CD4A07; }jQuery
$(function() { $('#tab-wrapper li:first').addClass('active'); // Tambahkan class='active' pada tab pertama $('#tab-body > div').hide(); // Sembunyikan konten tab $('#tab-body > div:first').show(); // Tapi tampilkan konten tab yang pertama // Saat tab diklik... $('#tab-wrapper a').click(function() { // Hilangkan kelas 'active' pada tab yang ditemukan $('#tab-wrapper li').removeClass('active'); // Terapkan kelas 'active' pada tab yang diklik $(this).parent().addClass('active'); var activeTab = $(this).attr('href'); // Dapatkan ID dari URL // Sembunyikan konten tab $('#tab-body > div:visible').hide(); // Tampilkan konten tab dengan ID yang sama menurut URL tab yang diklik $(activeTab).show(); return false; }); });