Cara termudah membuat Tab JavaScript pada Website

Photo by Yayan Kurnia Akbar

Banyak artikel atau tutorial diluar sana yang membahas tentang cara membuat Tab JavaScript. Akan tetapi, terlalu rumit dan kurang sederhana apalagi jika difahami oleh pemula.

Maka pada artikel ini Mangcoding akan membahas tentang bagaimana Cara termudah membuat Tab JavaScript pada Website dengan sangat sederhana.

JavaScript adalah bahasa pemrograman yang digunakan terutama untuk membuat halaman web menjadi interaktif dan dinamis. Selain itu, javascript adalah salah satu teknologi inti di dalam pengembangan web, bersama dengan HTML dan CSS.

Bahasa ini sangat populer dan digunakan secara luas dalam pengembangan aplikasi web modern, termasuk aplikasi web berbasis SPA (Single Page Applications) seperti yang dibangun menggunakan framework seperti React, Angular, atau Vue.js.

Beberapa fitur utama dari JavaScript termasuk :

1. Interaktivitas: JavaScript memungkinkan pengembang web untuk menambahkan fitur interaktif pada situs web, seperti dropdown menus, modal pop-ups, dan animasi.
2. Manipulasi DOM: JavaScript dapat digunakan untuk memodifikasi Document Object Model (DOM) dari halaman web, memungkinkan perubahan pada struktur halaman, konten, atau gaya tanpa perlu memuat ulang halaman.
3. Pemrograman Berbasis Acara (Event-Driven Programming): JavaScript mendukung penanganan event, yang berarti bahwa tindakan tertentu di halaman web, seperti klik tombol atau perubahan input, dapat memicu fungsi JavaScript.
4. Kompatibilitas dengan Browser: JavaScript dapat dijalankan langsung di browser tanpa perlu kompilasi, menjadikannya sangat fleksibel dan mudah digunakan.
5. Pengembangan Full-Stack: Dengan munculnya lingkungan seperti Node.js, JavaScript kini dapat digunakan tidak hanya untuk pengembangan frontend (di sisi klien) tetapi juga untuk pengembangan backend (di sisi server).

Tab JavaScript sederhana

Pertama-tama mari kita lihat tab html dibawah ini :

<ul>
  <li>
    <a
      href="javascript:rudrSwitchTab('tb_1', 'content_1');"
      id="tb_1"
      class="tabmenu active"
      >Tab 1</a
    >
  </li>
  <li>
    <a
      href="javascript:rudrSwitchTab('tb_2', 'content_2');"
      id="tb_2"
      class="tabmenu"
      >Tab 2</a
    >
  </li>
</ul>
<div id="content_1" class="tabcontent">Content of the first tab.</div>
<div id="content_2" class="tabcontent" style="display: none">
  Content of the second tab.
</div>

Langkah selanjutnya adalah fungsi JavaScript, Anda dapat menyisipkan fungsi ini di mana saja pada halaman atau pada file js lainnya. Perhatikan kode dibawah :

function rudrSwitchTab(rudr_tab_id, rudr_tab_content) {
  // first of all we get all tab content blocks (I think the best way to get them by class names)
  var x = document.getElementsByClassName("tabcontent");
  var i;
  for (i = 0; i < x.length; i++) {
      x[i].style.display = 'none'; // hide all tab content
  }
  document.getElementById(rudr_tab_content).style.display = 'block'; // display the content of the tab we need


  // now we get all tab menu items by class names (use the next code only if you need to highlight current tab)
  var x = document.getElementsByClassName("tabmenu");
  var i;
  for (i = 0; i < x.length; i++) {
      x[i].className = 'tabmenu';
  }
  document.getElementById(rudr_tab_id).className = 'tabmenu active';
}

Nah selanjutnya Anda dapat menambahkan sedikit sentuhan CSS (Cascading Style Sheet) untuk membuat tampilan Tab JavaScript Anda terlihat unik serta menarik.

Itulah artikel yang bisa Mangcoding share mengenai Cara termudah membuat Tab JavaScript pada Website, mudah-mudahan artikel ini bisa bermanfaat untuk teman-teman semua.

Referensi : Rudrastyh