Jump to content
Sign in to follow this  
sprinks412

Open a specific tab from another page

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!

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...