Cara Membuat Tab Konten Simpel

Bagi SyamSalabim, desain dalam postingan merupakan cara terbaik untuk mendapatkan perhatian pengunjung yang sedang membaca artikel pada halaman web atau blog kita. Struktur post yang rapi dan interaktif menjadi nilai utama sehingga visitor betah berlama-lama ketika mencoba memahami tujuan atau manfaat dari konten yang disajikan.

Salah satu kebutuhan postingan agar tampilannya lebih menarik dan tidak pasaran yakni dengan menambahkan opsi-opsi berupa tab untuk membedakan konten tertentu dengan pilihan klik yang simpel. Tab-tab tersebut bisa diisi dengan beragam konten baik itu paragraf teks maupun gambar.

Bagi yang penasaran bagaimana cara membuatnya sebenarnya langkahnya cukup sederhana dan bisa diterapkan oleh siapa saja utamanya para blogger atau web developer pemula. Setidaknya ada 2 cara yang bisa Agan pakai. Untuk lebih jelasnya silahkan ikuti tutorial berikut beserta kode-kode yang sudah disiapkan.

TUTORIAL

Tab Konten Simpel Dengan jQuery


Cara pertama dengan memanfaatkan resource jQuery library. Tapi karena tabnya cukup simpel sehingga Agan tidak perlu khawatir akan menambah load postingan.

Silahkan copy paste kode berikut berurutan sesuai strukturnya masing-masing dan simpan pada halaman web, atau bisa di test dulu dengan membuat file tunggal html memakai Notepad.

Kode CSS 
<style>
.tab-menu {
    padding: 0;
}
.tab-menu li {
    display: inline-block;
}
.tab-menu .active {
    background: yellow;
}
</style>

Kode HTML 
<ul class="tab-menu">
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
</ul>
<p id="tab-1" class="tab-content">Content 1</p>
<p id="tab-2" class="tab-content">Content 2</p>
<p id="tab-3" class="tab-content">Content 3</p>

Kode Javascript 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.tab-content').slice(1).hide();
    $('.tab-menu li').eq(0).addClass('active');
    $('.tab-menu li a').click(function(e) {
        e.preventDefault();
        var content = $(this).attr('href');
        $(this).parent().addClass('active');
        $(this).parent().siblings().removeClass('active');
        $(content).show();
        $(content).siblings('.tab-content').hide();
    });
});
</script>

HASIL

Content 1

Content 2

Content 3

Bagi pengguna Blogger, Syams asumsikan Agan sudah paham mengenai penempatan kode di dalam sebuah template, yakni di atas </head> untuk CSS, dan di atas </body> untuk Javascript. Kode HTML-nya kemudian taruh dalam artikel.

Tab Konten JavaScript Sederhana


Bagi yang mungkin tidak ingin memakai library jQuery dalam pemasangan tab, bisa mengikuti cara kedua ini. Tab konten berikut murni sepenuhnya hanya memanfaatkan JS dan HTML sederhana. Penggunaannya mungkin lebih terbatas dari cara pertama tapi tidak ada salahnya untuk dicoba.

Kode HTML 
<table border="0" cellpadding="1" cellspacing="1">
   <tr>
   <td><a href="javascript:showtab('tab-1')"> FIRST </a> |</td>
   <td><a href="javascript:showtab('tab-2')"> SECOND </a> |</td>
   <td><a href="javascript:showtab('tab-3')"> THIRD </a> |</td>
   </tr>
</table>
<p id="tab-container"> Click on the tabs </p>
<p id="tab-1" style="visibility:hidden"> Dummy Content from First Tab </p>
<p id="tab-2" style="visibility:hidden"> Find content from Second tab </p>
<p id="tab-3" style="visibility:hidden"> Content from Third Tab will be placed here </p>

Kode Javascript 
<script type="text/javascript">
function showtab(tabs)
{
 var tab=tabs;
 switch(tab) //this switch case replaces the tabContent
    {
      case "tab-1":
        document.getElementById('tab-container').innerHTML = document.getElementById("tab-1").innerHTML;
        break;
      case "tab-2":
  document.getElementById('tab-container').innerHTML = document.getElementById("tab-2").innerHTML;
        break;
      case "tab-3":
  document.getElementById('tab-container').innerHTML = document.getElementById("tab-3").innerHTML;
        break;
      default:
  document.getElementById('tab-container').innerHTML = document.getElementById("tab-1").innerHTML;
        break;
    }
}
</script>

HASIL
FIRST | SECOND | THIRD |

Click on the tabs



Demikian mengenai cara membuat tab konten web sederhana yang bisa Agan praktikkan sendiri untuk diterapkan ke dalam postingan blog ataupun halaman statis website. Untuk desainnya bisa dieksplorasi masing-masing menggunakan CSS biar lebih cantik di mata pengunjung. Jika masih ada yang membuat Agan bingung, silahkan sampaikan melalui kolom komentar.