Cara Membuat Simple Tab View Dengan Javascript

FANSUBLOGGER - Kali ini saya mau share cara buat Tab View dengan javascript. Walaupun udah pada tau, karena tutorial ini pasti udah banyak di blog lain. Jadi disini, tab view nya di bikin simple tapi plan. Biar ngga nge beratin blog kalian. Ok, langsung aja kita ke cara pembuatannya.

Cara Pembuatan

1.Kopikan CSS dibawah ini tepat di atas </style> atau di bawah <style>

/* CSS Tabs by Fansublogger */
.tabs {
clear:both;
}
.tab-list {
list-style: none;
padding-left: 0 !important;
margin:30px 0 0 0 !important;
}
.tab-list li {
background-color:#F3F7FA;
float: left;
padding: 0;
margin-bottom: 0px !important;
margin-right: 2px;
border: 1px solid #ECF1F5;
border-bottom: none;
border-radius: 3px 3px 0 0;
position:relative;
}
.tab-list li a {
text-align: center;
color: #666;
display: block;
padding:8px 12px;
font-weight: bold;
}
.tab-list .active {
background-color: #fff;
z-index: 10;
}
.tab-content {
border: 1px solid #ECF1F5;
padding: 20px 12px;
clear: both;
z-index: 1;
position: relative;
top: -1px;
}
.tab-content > div {
display: none;
}
.tab-content .active {
display: inherit;
}
.tab-content table {
margin:0 0 0 0 !important;
background:#fff;
}
.tab-content th, .tab-content td {
padding:0 10px 0 0;
border:none;
}

2.Kopikan Javascript dibawah ini tepat diatas </body> atau </head>

<script>
//<![CDATA[
$(function(){
 //---------Tabs by Fansublogger----------\\
 $(".tab-list .tab1 a").click(function(e) {
  e.preventDefault();
  $(".tabs .active").removeClass("active");
  $(".tab1").addClass("active");
 });
 
 $(".tab-list .tab2 a").click(function(e) {
  e.preventDefault();
  $(".tabs .active").removeClass("active");
  $(".tab2").addClass("active");
 });
 
 $(".tab-list .tab3 a").click(function(e) {
  e.preventDefault();
  $(".tabs .active").removeClass("active");
  $(".tab3").addClass("active");
 });
 
 $(".tab-list .tab4 a").click(function(e) {
  e.preventDefault();
  $(".tabs .active").removeClass("active");
  $(".tab4").addClass("active");
 });
});
//]]>
</script>

Cara Penulisan

Kopikan HTML berikut di Postingan/Halaman Statik. Dan ganti isi dan judul tabnya.

<section class="tabs">
<ul class="tab-list">
<li class="tab2"><a href="#">Isi konten list</a></li>
<li class="tab3"><a href="#">Isi konten biasa</a></li>
<li class="tab4"><a href="#">Isi konten data</a></li>
</ul>
<div class="tab-content">
<div class="tab2">
<b>Contoh Isi dengan List</b>
<ul>
<li>Daftar Isi</li>
<li>Daftar Isi</li>
<li>Daftar Isi</li>
<li>Daftar Isi</li>
<li>Daftar Isi</li>
<li>Daftar Isi</li>
<li>Daftar Isi</li>
</ul>
</div>
<div class="tab3">
Isi sesuka kalian
</div>
<div class="tab4">
    <b>Contoh Pengisian data:</b>
<table border="0">
   <tbody>
<tr>
     <td width="150">Nama Blog</td>
     <td>: </td>
     <td>Fansublogger</td>
   </tr>
<tr>
     <td width="150">Admin</td> 
     <td>: </td>
     <td><a href="http://www.fansublogger.blogspot.com/" title="Kopet">ADMIN</a>
     </td>
   </tr>
<tr>
     <td width="150">More Information</td> 
     <td>: </td>
     <td>Here!</td>
   </tr>
</tbody></table>
</div>
</div>
<!-- tab-content -->
</section>

Cara Membuat Simple Tab View Dengan Javascript