How do I link to specific tabs from another page?

I've set up my first tab to open by default on page load, but on some occasions, I want display the second or third tab when linked to from another page. How can I accomplish this?

I tried linking to the tab's ID, but the defaultOpen tab is the one that remains visible. I was thinking I could call the openTab function, passing the ID of the tab I wanted to view, but I don't know how to code that when going from one page to another. Any guidance you can offer would be much appreciated.

Here's the basic HTML tab skeleton.

<div class="new-tab-section">
  <div class="tabs">
    <button class="tablinks" onclick="openTab(event, 'InstallationTab')" id="defaultOpen">Installation</button>
    <button class="tablinks" onclick="openTab(event, 'TrainingTab')">Training</button>
    <button class="tablinks" onclick="openTab(event, 'TroubleshootingTab')">Troubleshooting</button>
  </div>
</div>
                
<div class="newsection">                
    <div id="InstallationTab"> content </div>
    <div id="TrainingTab"> content </div>
    <div id="TroubleshootingTab"> content </div>
</div>

Here's my Javascript.

function openTab(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";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

Thank you.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/6l0UjTt