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

  • 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:

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

  • 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

Komentar telah ditutup.