JSFiddle - React, Tailwind, and code Playground

menu tab js

by Shah Danial

HTML

<div id="pilihan-option" class="image-select">
    <span id="pilih-cari-gambar" class="select-search selected" data-show="search-gambar">Search</span>
    <span id="pilih-upload" class="select-upload" data-show="upload-gambar">Upload</span>
    <span id="pilih-masuk-gambar" class="select-url" data-show="masuk-gambar">Insert link</span>
  </div>

CSS

.selected { font-weight: 800}

JavaScript

//menu tab pure js

(function() { // start


var menu_tab = document.getElementById("pilihan-option").querySelectorAll('span');
if(menu_tab){

for (var i = 0; i < menu_tab.length; i++) {
  (function(index){
        menu_tab[i].onclick = function(){
              proceed_tab(menu_tab[index].getAttribute('data-show'), menu_tab[index].getAttribute('id'));
        }    
    })(i);
}

}

function proceed_tab(data_show, id){
  //reset to display none all.

  //add selected
  if(menu_tab){
    for(var i = 0; i < menu_tab.length; i++) {
      var theId = menu_tab[i].getAttribute('id');
      if(theId == id){
         // add selected
         var finalid = document.getElementById(theId);
         var semiKelas = finalid.className.replace("selected", "");
         var Kelas = semiKelas + ' ' + 'selected';
         finalid.setAttribute('class', Kelas);
      } else {
         //remove selected
         var finalid = document.getElementById(theId);
         var Kelas = finalid.className;
         console.log(Kelas)
         finalid.setAttribute('class', Kelas.replace("selected", "") );
      }
    }
  }
}

})();//end