Membuat Tab Folder Dengan jQuery dan Css

Sebelumnya Kolom Tutorial™ Mengucapkan Selamat tahun Baru 2013, semoga ditahun ini kita semua mendapatkan apa yang kita harapkan, amiiinnnnnnnnn,,,
Dihari pertama tahun 2013 ini Kolom Tutorial™ akan mencoba memberikan Tutorial Cara Membuat Tab Folder Dengan jQuery dan Css. baiklah sobat kita langsung aja ke Tutornya.

VIEW A DEMO

Untuk cara Penerapannya :
1. Masuk ke akun blogger sobat
2. Kopi Paste kode HTML dibawah
3. Kopi Paste kode CSS di bawah dan taruh sebelum kode
4. Kopi Paste kode jQuery dibawah dan taruh sebelum kode

KODE HTML

<ul id="tabs">
    <li><a href="#" title="tab1">One</a></li>
    <li><a href="#" title="tab2">Two</a></li>
    <li><a href="#" title="tab3">Three</a></li>
    <li><a href="#" title="tab4">Four</a></li>
</ul>

<div id="content">
    <div id="tab1">Text atau koding disini</div>
    <div id="tab2">Text atau koding disini</div>
    <div id="tab3">Text atau koding disini</div>
    <div id="tab4">Text atau koding disini</div>
</div>

KODE CSS

#tabs{
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li{
  float: left;
  margin: 0 .5em 0 0;
}

#tabs a{
  position: relative;
  background: #ddd;
  background-image: linear-gradient(to bottom, #fff, #ddd);
  padding: .7em 3.5em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  border-radius: 5px 0 0 0;
  box-shadow: 0 2px 2px rgba(0,0,0,.4);
}

#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after{
  background: #fff;
}

#tabs a:focus{
  outline: 0;
}

#tabs a::after{
  content:'';
  position:absolute;
  z-index: 1;
  top: 0;
  right: -.5em;
  bottom: 0;
  width: 1em;
  background: #ddd;
  background-image: linear-gradient(to bottom, #fff, #ddd);
  box-shadow: 2px 2px 2px rgba(0,0,0,.4);
  transform: skew(10deg);
  border-radius: 0 5px 0 0;
}

#tabs #current a,
#tabs #current a::after{
  background: #fff;
  z-index: 3;
}

#content
{
    background: #fff;
    padding: 2em;
    height: 220px;
    position: relative;
    z-index: 2;
    border-radius: 0 5px 5px 5px;
    box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

KODE JQUERY

<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script>
$(document).ready(function() {
        $("#content div").hide(); // Initially hide all content
        $("#tabs li:first").attr("id","current"); // Activate first tab
        $("#content div:first").fadeIn(); // Show first tab content

    $('#tabs a').click(function(e) {
        e.preventDefault();
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
    });
})();
</script>

Semoga artikel ini dapat bermanfaat bagi sobat blogger semua, sekali lagi ane ucapin selamat tahun baru 2013.
Happy Blogging and don't forget comment.......!!!