title: Clicking a link on a page that will change the tabs displayed on the new page
body: <p>I was hoping someone could point me in the right direction. HTML and CSS is my thing, and Jquery never really works well in my head. But I've been fighting with this and nearly got it working, but struggling on the last bit.</p>
  
  <p>On one page (tabs.html) I have have tabs that change by display blocking/none divs based on the button click</p>
  
  <pre><code>&lt;div id="tab-holder"&gt;
      &lt;button class="tabs active" onclick="openTab('everyday')"&gt;&lt;span&gt;Every Day Menu&lt;/span&gt;&lt;/button&gt;
      &lt;button class="tabs" onclick="openTab('sunday')"&gt;&lt;span&gt;Sunday Menu&lt;/span&gt;&lt;/button&gt;
      &lt;button class="tabs" onclick="openTab('buffet')"&gt;&lt;span&gt;Buffet Menu&lt;/span&gt;&lt;/button&gt;   
      &lt;button class="tabs" onclick="openTab('xmas')"&gt;&lt;span&gt;Christmas Menu&lt;/span&gt;&lt;/button&gt; 
  &lt;/div&gt;  
  
  &lt;div id="everyday"&gt;
     Everyday menu goes here
  &lt;/div&gt;
  &lt;div id="sunday"&gt;
     Sunday menu goes here
  &lt;/div&gt;
  &lt;div id="buffet"&gt;
     Buffet menu goes here
  &lt;/div&gt;
  &lt;div id="xmas"&gt;
     xmas menu goes here
  &lt;/div&gt;
  </code></pre>
  
  <p>and then for the jquery I use this:</p>
  
  <pre><code>function openTab(tabName) {
  var i;
  var x = document.getElementsByClassName("tabs__content");
  for (i = 0; i &lt; x.length; i++) {
      x[i].style.display = "none"; 
  }
  document.getElementById(tabName).style.display = "block"; 
  }
  
  var btnContainer = document.getElementById("tab-holder");
  
  // Get all buttons with class="btn" inside the container
  var btns = btnContainer.getElementsByClassName("tabs");
  
  // Loop through the buttons and add the active class to the current/clicked button
  for (var i = 0; i &lt; btns.length; i++) {
  btns[i].addEventListener("click", function() {
      var current = document.getElementsByClassName("active");
      current[0].className = current[0].className.replace(" active", "");
      this.className += " active";
  });
  }
  </code></pre>
  
  <p>I got this from online, but I'm pretty sure I know how it works.  And it does all work fine!</p>
  
  <p>But I also want to be able to link directly to tabs from other html pages. For example have a link that opens the tabs.html but automatically displays the "buffet" tab.</p>
  
  <p>I was recommended to do it using the query string. So I've got another HTML page that links to tab with </p>
  
  <pre><code>&lt;a href="tab-test.html?var1=buffet"&gt;Buffet&lt;/a&gt;
  </code></pre>
  
  <p>and in tabs.html I've added this code:</p>
  
  <pre><code>var vars = [], hash;
      var q = document.URL.split('?')[1];
      if(q != undefined){
          q = q.split('&amp;');
          for(var i = 0; i &lt; q.length; i++){
              hash = q[i].split('=');
              vars.push(hash[1]);
              vars[hash[0]] = hash[1];
          }
  }
  
  
  
  $(document).ready(function(){
  
     var tabName = vars['passTab']
      alert("tabs--"+tabName);
  
      var i;
      var x = document.getElementsByClassName("tabs__content");
      for (i = 0; i &lt; x.length; i++) {
          x[i].style.display = "none"; 
      }
      document.getElementById(tabName).style.display = "block"; 
  
  
  })
  </code></pre>
  
  <p>This is good in that it will display the correct tab/div, but I'm struggling to get the buttons to change to the correct active state. From what I gather, the original bit of code changes the active state by listening to the click event and since this is an onload event there's no click. So I'm struggling how to get it to change the button active states.</p>
  
  <p>Sorry this is long but I wanted to explain how I've got to where I've got to.  I'm happy to be pointed in another direction if I'm going about this in the wrong way! :)</p>
  
  <p>Thanks in advance</p>
  
  <p>Phil</p>