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.

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