How to operate two set of tabs separately in HTML?-CodePudding

I am trying to operate different sets of tabs separately but it is not working properly. Tab 1, 2, and 3 belong to the first set of tabs whereas Tab A, B, and C belong to the second set of tabs. Tab 1 and Tab A should be opened by default when the page is loaded.

What are the necessary changes to be made to achieve the goal?

<!DOCTYPE html>
<html>
<head>
<style>
.tab1 button.active {
  background-color: #03a1fc;
}
.tab2 button.active {
  background-color: #03a1fc;
}
.tabcontent {
  display: none;
}
</style>

</head>
<body>

<div class = "tab1">
  <button class = "tablinks" id="defaultOpen1" onclick="openTab1(event, 't11')">1</button>
  <button class = "tablinks" onclick="openTab1(event, 't12')">2</button>
  <button class = "tablinks" onclick="openTab1(event, 't13')">3</button>
</div>

<div id="t11" >
  <p>tab 1</p>
</div>

<div id="t12" >
  <p>tab 2</p> 
</div>

<div id="t13" >
  <p>tab 3</p>
</div>


<br><br><br>
<div class = "tab2">
  <button class = "tablinks" id="defaultOpen2" onclick="openTab2(event, 'tA')">A</button>
  <button class = "tablinks" onclick="openTab2(event, 'tB')">B</button>
  <button class = "tablinks" onclick="openTab2(event, 'tC')">C</button>
</div>

<div id="tA" >
  <p>tab A</p>
</div>

<div id="tB" >
  <p>tab B</p> 
</div>

<div id="tC" >
  <p>tab C</p>
</div>


<script>
function openTab1(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i  ) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i  ) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className  = " active";
}

function openTab2(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i  ) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i  ) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className  = " active";
}

document.getElementById("defaultOpen1").click();  
document.getElementById("defaultOpen2").click(); 
</script>

</body>
</html>

CodePudding user response：

a possibility...

document.querySelectorAll('button.tablinks').forEach(bt => 
  {
  bt.onclick = e =>
    {
    let btGroup = bt.closest('div')
    btGroup.querySelectorAll('button.tablinks').forEach( gBt => 
      gBt.classList.toggle('active', gBt===bt))
      
    btGroup.querySelectorAll('div.tabcontent').forEach( gDv => 
      gDv.classList.toggle('open', gDv.id===bt.dataset.tab))
    }
  })

button.active {
  background-color: #03a1fc;
}
.tabcontent {
  display: none;
}
.tabcontent.open {
  display: block;
}

<div>
  <button  data-tab="t11">1</button>
  <button  data-tab="t12">2</button>
  <button  data-tab="t13">3</button>

  <div id="t11" >
    <p>tab 1</p>
  </div>

  <div id="t12" >
    <p>tab 2</p> 
  </div>

  <div id="t13" >
    <p>tab 3</p>
  </div>
</div>

<div>
  <button  data-tab="t21">A</button>
  <button  data-tab="t22">B</button>
  <button  data-tab="t23">C</button>

  <div id="t21" >
    <p>tab A</p>
  </div>

  <div id="t22" >
    <p>tab B</p> 
  </div>

  <div id="t23" >
    <p>tab C</p>
  </div>
</div>

CodePudding user response：

Your programmatic structure needs to be adapted somewhat for this goal. It is best to work with two different tab selectors. I have renamed the first selector tablinks to tablinks1. This way both are displayed.

function openTab1(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent1");
  for (i = 0; i < tabcontent.length; i  ) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i  ) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className  = " active";
}


function openTab2(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i  ) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i  ) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className  = " active";
}

function init() {
  
}
document.getElementById("defaultOpen1").click();  
document.getElementById("defaultOpen2").click();

.tab1 button.active {
  background-color: #03a1fc;
}
.tab2 button.active {
  background-color: #03a1fc;
}
.tabcontent, .tabcontent1 {
  display: none;
}

<div class = "tab1">
  <button class = "tablinks" id="defaultOpen1" onclick="openTab1(event, 't11')">1</button>
  <button class = "tablinks" onclick="openTab1(event, 't12')">2</button>
  <button class = "tablinks" onclick="openTab1(event, 't13')">3</button>
</div>

<div id="t11" >
  <p>tab 1</p>
</div>

<div id="t12" >
  <p>tab 2</p> 
</div>

<div id="t13" >
  <p>tab 3</p>
</div>


<br><br><br>
<div class = "tab2">
  <button class = "tablinks" id="defaultOpen2" onclick="openTab2(event, 'tA')">A</button>
  <button class = "tablinks" onclick="openTab2(event, 'tB')">B</button>
  <button class = "tablinks" onclick="openTab2(event, 'tC')">C</button>
</div>

<div id="tA" >
  <p>tab A</p>
</div>

<div id="tB" >
  <p>tab B</p> 
</div>

<div id="tC" >
  <p>tab C</p>
</div>