Cara Membuat Tab View jQuery Dengan Sangat Mudah

Cara Membuat Tab View jQuery Dengan Sangat Mudah - Beberapa artikel yang ada di blog ini pernah membahas tentang tab view, baik yang ada di sidebar atau pun dalam artikel blog. Namun khusus tab view yang ada di sidebar yang pernah terpasang di sidebar blog ini sudah tidak ada karena mneyesuaikan dengan perkembangan blog ini yang semakin merosot. Sedangkan tab view yang ada didalam artikel masih bisa diliha di artikel yang sudah ditulis sebelumnya di tab view halaman blog

Perhatikan gambar diatas yang merupakan Demo dari tab view yang dibuat dengan menggunakan script namun sangat mudah dipasang kedalam blog. Untuk melihat demonya langsung bisa di klik tombol berikut ini

DEMO

Bagaimana Cara Membuat Tab View jQuery Tersebut?
Dalam membuat tab view ini saya tidak akan menjelaskannya secara gamblang namun jika sobat tertarik untuk membuat dan memasang tab view ini kedalam blog sobat silahkan salin beberapa kode CSS dan kode script berikut ini kedalam template blog. Dan jangan kuatir untuk script, tidak akan memberatkan loading blog. Kode CSS berikut ini disalin kedalam kode CSS yang ada didalam template blog dan sesuaikan value atau nilai yang ada didalam kode berikut ini

ul.tabs{margin:0 -10px;}
.tabs li{list-style:none;display:inline;}
.tabs a{padding:5px 10px;display:inline-block;background:#666;color:#fff;text-decoration:none;}
.tabs a.active {background:#fff;color:#000;}
#tab1,#tab2,#tab3{padding:10px;width:600px;background:#fff;}

Dan salin kode Script berikut sebelum kode </head> yang ada didalam kode template blog

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;ul.tabs&#39;).each(function(){
var $active, $content, $links = $(this).find(&#39;a&#39;);
$active = $($links.filter(&#39;[href=&quot;&#39;+location.hash+&#39;&quot;]&#39;)[0] || $links[0]);
$active.addClass(&#39;active&#39;);
$content = $($active[0].hash);
$links.not($active).each(function () {
$(this.hash).hide();
});
$(this).on(&#39;click&#39;, &#39;a&#39;, function(e){
$active.removeClass(&#39;active&#39;);
$content.hide();
$active = $(this);
$content = $(this.hash);
$active.addClass(&#39;active&#39;);
$content.show();
e.preventDefault();
});
});
});
</script>

Salin markup HTML berikut ini dimanapun yang sobat inginkan, dengan catatan Lebar dan Tinggi yang digunakan sesuai atau disesuaikan dengan nilai lebar yang ada di kode CSS diatas

<ul class='tabs'>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'>
<h3>Section 1</h3>
<p>Ganti dengan tulisan atau gambar atau apapun yang sobat inginkan</p>
</div>
<div id='tab2'>
<h3>Section 2</h3>
<p>Ganti dengan tulisan atau gambar atau apapun yang sobat inginkan</p>
</div>
<div id='tab3'>
<h3>Section 3</h3>
<p>Ganti dengan tulisan atau gambar atau apapun yang sobat inginkan</p>
</div>

Itulah cara mudah membuat tab view dengan jquery yang bisa sobat terapkan kedalam blog sobat. Semoga bermanfaat