/    Sign up×
Community /Pin to ProfileBookmark

Trying to link to an open tab on another page using Javascript

Hello! I’m new here and hoping for some help. I’d like to preface this by saying I’m more of a web designer as opposed to a developer, though I do have limited knowledge in PHP and JS. I’ve created a site for a close friend. I’ve set up several “tabs” within the service page and I’m trying to link to a specific tab from the homepage. For example, if I click “nonclinical” on the homepage, it will link to the service page and display the “clinical” tab instead of the default. I’ve tried several different methods to get this to work, but they are all failing me.

Here’s my tab code on the services page:

[code]<div class=”col-3″>
<button class=”tablinks” onclick=”openCity(event, ‘strat’)” id=”defaultOpen”>
<div class=”tab-wrap-ltblue”>
<div class=”strategict tab4mobile” style=”height: 100px;”> </div>
<div class=”tablink-head stories mobile-no”><h4>Strategic Innovation</h4></div></div></button>
</div>
<div class=”col-3″>
<button class=”tablinks” onclick=”openCity(event, ‘analysis’)”>
<div class=”tab-wrap-blue”>
<div class=”analysist tab4mobile” style=”height: 100px;”> </div>
<div class=”tablink-head stories mobile-no”><h4>Integrated Business Analysis</h4></div></div></a></button>
</div>
<div class=”col-3″>
<button class=”tablinks tech” onclick=”openCity(event, ‘tech’)”>
<div class=”tab-wrap-green”>
<div class=”archt tab4mobile” style=”height: 100px;”> </div><div class=”tablink-head stories mobile-no”><h4>Technology and Architecture</h4></div></div></button>
</div>[/code]

and the java to make it work:

[code]<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>[/code]

The links on the homepage are simple:

[code]<a href=”services.php”><div class=”help-btns”> Learn More</div></a> [/code]

What would be the easiest way to accomplish this?

Edited by site staff: Inserted code tags.

to post a comment
HTMLJavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumMay 20.2019 — Please use code tags when posting code, it will increase readability a lot.

https://www.bbcode.org/examples/?id=15

Add a hash to the URL in the link on the homepage like this:
&lt;a href="services.php#clinical"&gt;&lt;div class="help-btns"&gt; Learn More&lt;/div&gt;&lt;/a&gt;
Then in the service page read that hash and call your function openCity handing over the content of the hash as cityName.

https://webplatform.github.io/docs/apis/location/hash/
×

Success!

Help @jessica412 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...