sprinks412 Posted June 23, 2019 Share Posted June 23, 2019 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 More sharing options...
Ingolme Posted June 25, 2019 Share Posted June 25, 2019 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now