Jump to content

Open a specific tab from another page


sprinks412

Recommended Posts

Hello! I'm looking for some help with my Javascript code. I have a services page with 5 tabs. I used w3schools to obtain and tweak this code as needed.  However, I need to link to a specific tab from my home page and I'm having trouble editing the Javascript to make this possible. Here's what I have thus far: 

Services Page HTML: 

<div class="col">
  <button class="tablinks" onclick="openCity(event, 'nonclinical')"><div class="tab-wrap-blue"><div class="nonclinical" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Nonclinical Development</h4></div></div></button>
</div>
<div class="col">
  <button class="tablinks" onclick="openCity(event, 'clinical')"><div class="tab-wrap-green">
  <div class="clinical" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Clinical Development</h4></div>	</div></button>
</div>
<div class="col">
   <button class="tablinks" onclick="openCity(event, 'safety')"><div class="tab-wrap-dkgreen"><div class="safety" style="height: 90px;"> 	</div><div class="tablink-head stories mobile-no"><h4>Regulatory, Safety and Manufacturing</h4></div></div></button>
</div>
<div class="col">
  <button class="tablinks" onclick="openCity(event, 'life')"><div class="tab-wrap-gray"><div class="life" style="height: 90px;"> </div><div class="tablink-head stories mobile-no"><h4>Life Science Enterprises</h4></div></div></button>
</div>

Current Javascript: 

<script>
function openCity(evt, cityName) {
  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(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
	// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
	
});
</script>

Home page link needs to go to both the services page, and open up a specific <button>.  Ie. <button class="tablinks" onclick="openCity(event, 'clinical')">

I'm new to Javascript and W3Schools has been such a help! Hoping there is a simple solution from someone who knows this code well. Thanks so much!

Link to comment
Share on other sites

You can add a hash to the URL to which indicates the ID of the tab to be shown. When the page loads, you can use location.hash to access this value and then run the openCity() function with the ID obtained. The openCity() function would need to be changed to replace evt.currentTarget with a real pointer to the button that needs to be highlighted. If you don't understand how this openCity() function works right now, I suggest you keep studying until you can fully understand it and know what to change.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...