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!