0

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 "Technology and Architecture" on the homepage, it will link to the service page and display the "Technology and Architecture" tab instead of the default. I've tried several different methods to get this to work, but they are all failing me. It's a little different from all of the help I've found on this site - in that my tabs are built slightly different. They are not lists, and are actually comprised of multiple elements. I'm struggling to find a solution for my specific layout.

Here's my tab code on the services page:

<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>

 and the java to make it work:
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent.style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks.className = tablinks.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>

 The links on the homepage are simple:
 <a href="services.php"><div class="help-btns"> Learn More</div></a>

What would be the easiest way to accomplish this? Thank you so much for your help! I'm not trying to open a new "browser" tab - but a navigation tab within a page of my site.

Jessica
  • 11
  • 2
  • Possible duplicate of [Open a URL in a new tab (and not a new window) using JavaScript](https://stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-and-not-a-new-window-using-javascript) – Chris Deacy May 20 '19 at 01:32
  • No, this is something completely different - not related to opening a new tab in a browser. – Jessica May 20 '19 at 01:46
  • Whoops, misread the question. One thing I notice right off the bat is that in your `for` loops, you're not actually using the index to reference each element. For example, `tabcontent.style.display = "none";` should actually be `tabcontent[i].style.display = "none";` – Chris Deacy May 20 '19 at 02:03
  • This is similar to what you're looking for: https://stackoverflow.com/questions/5227419/jqueryui-tabs-deeplinking-into-tab-content (all of which you could do without jQuery UI). Personally, I'd pass a query string (`index.html?tab=titleOfTab`) and on the server, parse the URL tab value and render/show the content on the server. If you prefer to keep things on the client, you can either go with a query string or even simply a hash (`index.html#titleOfTab`). On page load, you would just read that value and then show the appropriate tab. – Jack May 20 '19 at 02:03

0 Answers0