$(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 berdasarkan URL tab yang diklik
$(activeTab).show();
return false;
});
});
@Ijal Fauzi Itu untuk menetralkan CSS bawaan dari peramban. Di sini Saya menargetkan elemen apa saja yang berada di dalam #tab-outer:
/* Netralkan atau hilangkan
* margin dan padding bawaan pada elemen apa saja
* yang berada di dalam #tab-outer
*/
#tab-outer * {
margin:0px 0px;
padding:0px 0px;
}
Dalam hal ini Saya menargetkan elemen <ul> dan <li> yang secara default sudah memiliki margin dan padding-nya sendiri.
mas.. ini bisa ga.. dipraktekin di blogspot.. gratis... saya bingung ga ngerti untuk masukin aplikasi ini.. pengen buat blog dengan tab judul yang berbeda
13 Komentar
abang ichal
wahh lumayan nihh..
ga banyak kode
Ijal Fauzi
satu yang saya ingin tanyakan mas, apa fungsi * (tanda bintang) dalam css dan yang mas sisipkan di
#tab-outer * {
margin:0px 0px;
padding:0px 0px;
}
saya juga sering menemukan kode seperti ini di beberapa template narablog
*{margin:0;padding:0;}
Taufik Nurrohman
@Ijal Fauzi Itu untuk menetralkan CSS bawaan dari peramban. Di sini Saya menargetkan elemen apa saja yang berada di dalam
#tab-outer
:Dalam hal ini Saya menargetkan elemen
<ul>
dan<li>
yang secara default sudah memilikimargin
danpadding
-nya sendiri.[note]Terkait: CSS Reset[/note]
Taufik Nurrohman
@Ijal Fauzi Simbol
*
artinya "apa saja".Ohim
bos minta tutirial cara menggunakannya..sya newbie yang pengen belajar tentang artikel ini..trimmS
Laboratorium Sains
mas.. ini bisa ga.. dipraktekin di blogspot.. gratis... saya bingung ga ngerti untuk masukin aplikasi ini..
pengen buat blog dengan tab judul yang berbeda
Unknown
wahhh, keren banget tutorialnya pak....
makasih banyak yahh ^_^
Unknown
Aslm bang,, bisa nggak tutorial ini di aplikasikan dalam postingan blogger? jadi dalam satu posting menjadi beberapa tab.
thanks
Taufik Nurrohman
Waalaikumsalam. Kalaupun bisa pasti caranya rumit. Belum pernah kepikiran.
Unknown
bantu jawab pertanyaan setahun yang lalu :)
bisa, taruh di atas < / head > dan dibungkus teks kondisional halaman posting
jquery anda ....
Unknown
Wah ini tutorial yang saya cari
Terimakasih Mas :-bd
Cheesy Martabak
kalo pake CSS aja bisakan kan mas =p*
Taufik Nurrohman
Bisa-bisa. Cek → http://cssdeck.com/labs/demo-for-tabbed-layout-with-css-target