W3.CSS Navigation Tabs - Select based on URL parameter

Question

I am using W3.CSS Navigation tabs

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";
}

body {font-family: "Lato", sans-serif;}

/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

I am now stuck as I want to be able to open the page with a tab pre-selected depending on the URL

So for instance www.example.com/mypage#tokyo would open the page with the Tokyo tab already selected.

Does anybody have an example?

so you're saying, once you click on a tab and it goes to that page, you want the tab that you clicked on to be selected? — Keith, Jun 02 '17 at 13:26

score 1 · Answer 1 · answered Jun 02 '17 at 13:26

1

Using window.location.href , you can get the url of the page, then you use .split(/[#]+/).pop() to get the last part of it, and with that you can use the result as a selector to show the correct tab.

answered Jun 02 '17 at 13:26

Sensoray

2,360
2
18
27

score 1 · Answer 2 · answered Jun 02 '17 at 13:44

1

Add this to the end of your JavaScript:

myurl = window.location.href;
londonURL = "www.example.com/mypage#london";
parisURL = "www.example.com/mypage#paris";
tokyoURL = "www.example.com/mypage#tokyo";

function preOpen () {
  if (myurl == londonURL) {
    openCity(event, 'London');
    } else if (myurl == parisURL ) {
      openCity(event, 'Paris');
    } else if (myurl == tokyoURL) {
      openCity(event, 'Tokyo');
    }
};
preOpen();

answered Jun 02 '17 at 13:44

Zeronull

261
3
5

Within the existing function? – fightstarr20 Jun 02 '17 at 14:00
No behind it, at the end. Make sure you enter the real links (instead of "www.example.com/...") to make it work. – Zeronull Jun 02 '17 at 14:05

Julian Espinosa · Answer 3 · 2017-06-02T19:29:29.503

So let's assume this is your Home page.

<a href="pathToFile/test.html#London">London</a>
<a href="pathToFile/test.html#Paris">Paris</a>
<a href="pathToFile/test.html#Tokyo">Tokyo</a>

Once you click one of those anchor tags it will bring you to the next page with the tablinks. In this page (the one with the tablinks) add this JS

function eventFire(el, etype){

  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}
selectedTab = window.location.href;
console.log(selectedTab);
idUrl = selectedTab.substr(selectedTab.indexOf("#")+1);
console.log(idUrl);
if(idUrl == "Tokyo"){
 eventFire(document.getElementsByClassName("tablinks")[2], 'click'); 
}
if(idUrl == "Paris"){
 eventFire(document.getElementsByClassName("tablinks")[1], 'click'); 
}
if(idUrl == "London"){
 eventFire(document.getElementsByClassName("tablinks")[0], 'click'); 
}

This will simulate a click on the desired tablink from the previous page based on the id.

This line: selectedTab = window.location.href; gets the url. This line: idUrl = selectedTab.substr(selectedTab.indexOf("#")+1); Finds the index of the # on the url and adds one to it so you can get the id you're looking for.

Here: if(idUrl == "Tokyo"){ eventFire(document.getElementsByClassName("tablinks")[2], 'click'); } Here we set a condition if thats the desired ID then we pass as the first parameter the class name of that tablink in this case is position 2 on the array of classnames tablinks. The event functions is taken from here

See the screenshots as an example. Hope this helps.

Home:

London clicked based on the url passed.

Edit 2 Use this see comments for explanation

selectedTab = window.location.href;
idUrl = selectedTab.substr(selectedTab.indexOf("#")+1);
// Get the Classes
arr = document.getElementsByClassName("tablinks");
// Loop through the array and a condition to find if the id on the url is similar to the one in the
// array, if so then call the function and pass that parameter.
for(var i = 0; i<arr.length; i++){
 if(idUrl == arr[i].innerText){
  eventFire(arr[i],'click');
 }
}

Remove this:

selectedTab = window.location.href;
console.log(selectedTab);
idUrl = selectedTab.substr(selectedTab.indexOf("#")+1);
console.log(idUrl);
if(idUrl == "Tokyo"){
 eventFire(document.getElementsByClassName("tablinks")[2], 'click'); 
}
if(idUrl == "Paris"){
 eventFire(document.getElementsByClassName("tablinks")[1], 'click'); 
}
if(idUrl == "London"){
 eventFire(document.getElementsByClassName("tablinks")[0], 'click'); 
}

W3.CSS Navigation Tabs - Select based on URL parameter

3 Answers3