I have two tabs that display different content. When a tab is clicked I add to it the class 'active' and the other tab will be change to 'inactive'. Moreover, I want that when a tab is clicked the content of this tab will be change to display 'block' and the other one to 'none'. I success to do the tab change from active to inactive, but to show the specific content on tab I have a problem. Because in first click all is working good, but if I click another time (second time), both content of tab will be displayed at 'none'. First can you help me optimize my code of the tab changing from active to inactive (because I think there is no need of loop only for two tabs). Second, can you help fix the problem of display content when tab is clicked.

I need the script to be pure JavaScript.

<div >
    <ul >
        <li  id="tab1">Lorem</li>
        <li  id="tab2">Hello</li>
    </ul>
    <div id="tab1C">
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae iure fuga rem eos facere perferendis ut molestias. Vitae consectetur, fugiat blanditiis illum recusandae excepturi officiis nihil. Similique dolores in illum?
    </div>
    <div id="tab2C">
        Hello world
    </div>
</div>

Javascript code

var tabs = document.querySelectorAll(".tabs-wrapper li");
    for (let index = 0; index < tabs.length; index  ) {
        tabs[index].onclick = function () {
            //Remove class from sibling
            var el = tabs[0];
            while (el) {
                if (el.tagName === 'LI') {
                    console.log(el.id);
                    el.classList.remove("tab-active");
                    el.classList.add("tab-inactive");
                }
                el = el.nextSibling;
            }

            if (this.id == 'tab1') {
                let hide = document.querySelector('#tab2C');
                // let show = doducment.querySelector("tab1C");

                // show.style.display = 'block';
                hide.style.display = 'none';
            }
            else if (this.id == 'tab2') {
                // let show = document.querySelector("tab2C");
                let hide = document.querySelector('#tab1C');

                // show.style.display = 'block';
                hide.style.display = 'none';
            }
            this.classList.remove("tab-inactive");
            this.classList.add("tab-active");
            
        };
    }

CodePudding user response：

I have added a click function for changing the active selection. Therefore I have added a parameter in your HTML and the onclick. When you click the element the function is called and decides in a switch statement on which to call. Before that tab1, tab2 and tab1C, tab2C will be reverted (remove active flag, hide both divs).

function changeActive(selection) {
  let tabsWrapper = document.querySelectorAll(".tabs-wrapper li");
  let tabs = document.querySelectorAll(".tab"); 
  
  //remove active flag
  for(let i = 0; i < tabsWrapper.length; i  ) {
    let li = tabsWrapper[i];
    li.classList.remove("tab-active");
  }
  
  //hide tabs
  for(let i = 0; i < tabs.length; i  ) {
    let tab = tabs[i];
    tab.classList.add("hide");
  }
  
  
  switch(selection) {
      case 'tab1':
          let tab1c = document.querySelector('#tab1C');
          let tab1 = document.querySelector('#tab1');
          tab1.classList.add("tab-active");
          tab1c.classList.remove("hide");
          break;
      case 'tab2':
          let tab2c = document.querySelector('#tab2C');
          let tab2 = document.querySelector('#tab2');
          tab2.classList.add("tab-active");
          tab2c.classList.remove("hide");
          break;
      default:
          break;
  }
}

.tab-active {
  font-weight: bold;
  color: red;
}

.hide {
  display: none;
}

<div >
    <ul  >
        <li  id="tab1"><span onclick="changeActive('tab1')">Lorem</span></li>
        <li id="tab2"><span onclick="changeActive('tab2')">Hello</span></li>
    </ul>
    <div  id="tab1C">
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae iure fuga rem eos facere perferendis ut molestias. Vitae consectetur, fugiat blanditiis illum recusandae excepturi officiis nihil. Similique dolores in illum?
    </div>
    <div  id="tab2C">
        Hello world
    </div>
</div>

CodePudding user response：

If you are using the current approach for your design, (content.id == tab.id 'C', you can use this code, otherwise, you can use a hashMap for getting the element by id and changin the display.

    var tabs = document.querySelectorAll(".tabs-wrapper li");
    for (let index = 0; index < tabs.length; index  ) {
      let tab = tabs[index];
      tab.addEventListener('click', (event) => { toggler(tab) });
    }

    function toggler(selectedTab) {
      for (let index = 0; index < tabs.length; index  ) {
        let tab = tabs[index];
        if (tab.id != selectedTab.id) {
          tab.classList.remove("tab-active");
          tab.classList.add("tab-inactive");
          document.getElementById(`${tab.id}C`).style.display = "none";
        } else {
          tab.classList.add("tab-active");
          tab.classList.remove("tab-inactive");
          document.getElementById(`${tab.id}C`).style.display = "block";
        }
      }
    }

  <div >
    <ul >
      <li  id="tab1">Lorem</li>
      <li  id="tab2">Hello</li>
    </ul>
    <div id="tab1C">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae iure fuga rem eos facere perferendis ut molestias.
      Vitae consectetur, fugiat blanditiis illum recusandae excepturi officiis nihil. Similique dolores in illum?
    </div>
    <div id="tab2C">
      Hello world
    </div>
  </div>