Simple jQuery Tabs with opacity Effect

Tab yang berbasis jQuery ini hanya menggunakan sedikit tambahan javascript. Beberapa kode CSS membantu membentuk sebuah tabs content yang sangat menarik. Background gradient dari beberapa background image kita manfaatkan untuk memberi sentuhan gradasi warna pada background controll tab dan kontenya. Fade efek di hasilkan melalui opacity property. Cukup mudah membuatnya dan cukup manis pula untuk digunakan di blog agar tercipta efisiensi ruang.

Javascript :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function () {
 var tabContainers = $('div.GRtabs > div');
 tabContainers.hide().filter(':first').show();
 $('div.GRtabs ul.GRtabnav a').click(function () {
  tabContainers.hide();
  tabContainers.filter(this.hash).show();
  $('div.GRtabs ul.GRtabnav a').removeClass('selected');
  $(this).addClass('selected');
  return false;
 }).filter(':first').click();
});
//]]>
</script>

Seperti inilah javascript yang digunakan untuk membuat simple jQuery tabs. Dengan tambahan beberapa deret kode css maka akan dihasilkan sebuah tabs content seperti berikut:

• Tab-1
• Tab-2
• Tab-3
• Tab-4

Title Tab Pertama (1)

Konten Tab Pertama (1)

Konten dari Tab Pertama (1)

Title Tab kedua (2)

Konten tab kedua (2)

Konten dari Tab Kedua (2)

Title Yab ketiga (3)

Konten dari Tab Ketiga (3)

Title Tab keempat (4)

Anda bisa meletakkan teks, image atau yang lain disetiap tab. Ukuran image sebaiknya dibatasi agar tak terlalu memenuhi tab sekaligus juga tak membebani blog secara berlebiham. Ini adalah contoh menempatkan image (thumbnail) di bagian kiri (float:left). Anda bisa mengatur senidri diposisi yang dikehendaki melalui floating position.
Anda bisa meletakkan teks, image atau yang lain disetiap tab. Ukuran image sebaiknya dibatasi agar tak terlalu memenuhi tab sekaligus juga tak membebani blog secara berlebiham. Ini adalah contoh menempatkan image (thumbnail) di bagian kiri (float:left). Anda bisa mengatur senidri diposisi yang dikehendaki melalui floating position.
Anda bisa meletakkan teks, image atau yang lain disetiap tab. Ukuran image sebaiknya dibatasi agar tak terlalu memenuhi tab sekaligus juga tak membebani blog secara berlebiham. Ini adalah contoh menempatkan image (thumbnail) di bagian kiri (float:left). Anda bisa mengatur senidri diposisi yang dikehendaki melalui floating position.

Tutorial :
Tutorial » jQuery tabs with opacity effect