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" class="tabcontent">
<p>tab 1</p>
</div>
<div id="t12" class="tabcontent">
<p>tab 2</p>
</div>
<div id="t13" class="tabcontent">
<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" class="tabcontent">
<p>tab A</p>
</div>
<div id="tB" class="tabcontent">
<p>tab B</p>
</div>
<div id="tC" class="tabcontent">
<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>