Mecha versi 2.6.4 sudah dirilis!

JQuery Tab

Tabel Konten
  1. HTML 
  2. CSS 
  3. 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;
    });
});

Lihat Demo

13 Komentar

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:

/* 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]

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

Komentar telah ditutup.