JQuery Tab
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 berdasarkan URL tab yang diklik
$(activeTab).show();
return false;
});
});
Labels: JavaScript, Potongan
13 Comments:
wahh lumayan nihh..
ga banyak kode
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;}
@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.
[note]Terkait: CSS Reset[/note]
@Ijal Fauzi Simbol * artinya "apa saja".
bos minta tutirial cara menggunakannya..sya newbie yang pengen belajar tentang artikel ini..trimmS
mas.. ini bisa ga.. dipraktekin di blogspot.. gratis... saya bingung ga ngerti untuk masukin aplikasi ini..
pengen buat blog dengan tab judul yang berbeda
wahhh, keren banget tutorialnya pak....
makasih banyak yahh ^_^
Aslm bang,, bisa nggak tutorial ini di aplikasikan dalam postingan blogger? jadi dalam satu posting menjadi beberapa tab.
thanks
Waalaikumsalam. Kalaupun bisa pasti caranya rumit. Belum pernah kepikiran.
bantu jawab pertanyaan setahun yang lalu :)
bisa, taruh di atas < / head > dan dibungkus teks kondisional halaman posting
jquery anda ....
Wah ini tutorial yang saya cari
Terimakasih Mas :-bd
kalo pake CSS aja bisakan kan mas =p*
Bisa-bisa. Cek → http://cssdeck.com/labs/demo-for-tabbed-layout-with-css-target
Post a Comment
<< Home