I'm creating this page (http://www.50allstars.com/2018/05/test-menu.html) and would like to be able to directly link to a particular tab if need be.

I've found a site (https://css-tricks.com/better-linkable-tabs/) that says a way for this to be done, but I'm not sure how to implement it or if there's a more simple & elegant solution out there. (https://css-tricks.com/examples/OrganicTabsReplaceState/?tab=jquerytuts2)

Any help would be greatly appreciated. Thanks!

Recommended Answers

All 3 Replies

You can use window.location.hash to fetch the #hash in a URL e.g. page.html#tab1

You can add jQuery that loads on page load to retrieve the hash and, if it's set to a specific value, switch tabs.

Thanks for the response, but everything I googled for that didn't help me out. I should've mentioned that I'm a novice at this. When I tried to combine the linkable tab tutorial, I realized I was undoing what I had as I tried to implement the new. So now I'm at a loss.

I've now stripped everything to make it as easy as possible for someone to help. So what's the easiest way to make one of these 3 tabs open with a direct link: http://www.50allstars.com/2018/05/tabs.html

Sorry for not understanding the previously provided solution. I put the code here, if it's easier to see: https://codepen.io/jonsan32/pen/rvbzZx

Thanks a ton!

<href="page.html" target="namedtab">foo</a>

name the target. This will create a new tab named whatever your target is named. Any links naming the same target will always turn up in that tab.
Then if you need, onload="this.focus()" to bring the tab to the front.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.