Linking to tab from URL

Question

I've got some code which has three page tabs, only one is shown at a time, with an active marker too however I cannot work out how I can link directly to the url

https://jsfiddle.net/c51xvekh/

My current html is:

function openTabs(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("city");
  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].classList.remove("active");
  }
  document.getElementById(tabName).style.display = "block";
  document.getElementById(tabName + "-tab").classList.add("active");
}
document.getElementById("sunbed-tab").click();

<div class="breadcrumb-wrap">
  <ul class="breadcrumb">
    <li><a class="tablinks" id="sunbed-tab" onclick="openTabs(event, 'sunbed')">Sunbed<br>Packages</a></li>
    <li><a class="tablinks" id="trainer-tab" onclick="openTabs(event, 'trainer')">Personal<br>Trainers</a></li>
    <li><a class="tablinks" id="sauna-tab" onclick="openTabs(event, 'sauna')">Sauna<br>Rooms</a></li>
  </ul>
</div>

<div id="sunbed" class="city">
This is sunbed page
</div>

<div id="trainer" class="city">
This is trainer page
</div>

<div id="sauna" class="city">
This is sauna page
</div>

for example - if I visit url.com/page#sauna then it opens the page with the sauna section opened and likewise for trainers if /page#trainer is visited.

Is there something in the JS that could do this?

I've just tried

if(window.location.hash.substring(1)=='trainer') {
        document.getElementById("trainer-tab").click();
} elseif(window.location.hash.substring(1)=='sauna') {
        document.getElementById("sauna-tab").click();
} else {
        document.getElementById("sunbed-tab").click();
}

but it seems to fail with unexpected token.

(I'm a php dev and newly learning js)

I've tried running :target in the CSS and having it set to display: block but that didnt work.

Any ideas please?

Please provide enough code so others can better understand or reproduce the problem. — Community, Dec 19 '22 at 11:13
It sounds like you could just get the hash from the URL ([How can you check for a #hash in a URL using JavaScript?](https://stackoverflow.com/questions/298503/how-can-you-check-for-a-hash-in-a-url-using-javascript)) and then call your `openTabs` function with that value on page load? — DBS, Dec 19 '22 at 11:22
`elseif` should be `else if` in that snippet in your comment. And instead of faking a click, it would be easier to just call `openTabs(null, hashValue)` (Since the `evt` parameter doesn't seem to be used, it could be removed or passed as `null`) — DBS, Dec 19 '22 at 11:46
@DBS - thank you for that! I've managed to get it working now, however there is a strange redirect happening. So if I access mysite.com/mypage#sauna it actually redirects off to a completely different page. I'm guessing there is something in the permalinks or htaccess that is screwing around with the hash. I've googled and searched here to try and find a way to allow a normal url with a hash, but I cannot find the answer to let my page display correctly. do you know what I need to look at to allow the page url to include a hash? — Johnners, Dec 19 '22 at 21:48
@DBS I'm building a wordpress site and it looks like the url is going to be domain.com/other-services/#trainer/ (Note the / between the page and the #) Is there a way to get my code to read the # after the / I'm using ``` if(window.location.hash.substring(1)=='trainer') { ``` — Johnners, Jan 05 '23 at 15:10

score 0 · Answer 1 · answered Dec 19 '22 at 11:54

Could use #hash or QueryParams. I've attached an example using both

//USING #HASH
let hashString = location.hash ? location.hash.substring(1) : "";

if(hashString) {
  openTabs(null, hashString);
}

//USING ?QUERY=PARAM
let queryParams = new URLSearchParams(location.search);

if(queryParams.get('tab')) {
  openTabs(null, queryParams.get('tab'));
}

score 0 · Answer 2 · answered Dec 19 '22 at 11:54

You could try get url location by splitting hash:

const location = window.location.href.split("#")[1];

Then, set city class to display:none and add city--sunbed and so on, you've to check if elements contains that class e.g:

const tabsHandler = document.querySelectorAll('.city');
tabsHandler.forEach((element)=>{
element.classList.contains(`city--${location}`) ? element.classList.add('show-block') : '';
});

score 0 · Accepted Answer · answered Dec 19 '22 at 21:33

I managed to get it to work using this code

if(window.location.hash.substring(1)=='trainer') {
        document.getElementById("trainer-tab").click();
} else if(window.location.hash.substring(1)=='sauna') {
        document.getElementById("sauna-tab").click();
} else {
        document.getElementById("sunbed-tab").click();
}

Linking to tab from URL

3 Answers3