title: JavaScript/HTML - Set selected tab based on url variable
body: <p>I have a search page, and I found a script for a tab component which seperates the TV-Show search page and Movie search page. When a user clicks on lets say the "Movie" tab, and perform a search from there, I make the form add <code>?type=movie&amp;...</code> to the url. But, when they perform the search, the tab that's selected is the the "TV-Show" tab, and the have to click over to get to the other tab which has the results they want.</p>
  
  <p>Here is the code, and in it is some of what I tried:</p>
  
  <p>the HTML looks like this:</p>
  
  <pre><code>&lt;article class="first"&gt;
       &lt;h2&gt;Search&lt;/h2&gt;
  
      &lt;hr/&gt;
      &lt;div id="tabWrapper"&gt;
          &lt;div id="tabContainer"&gt;
              &lt;div class="tabs"&gt;
                  &lt;ul&gt;
                      &lt;li id="tabHeader_1"&gt;TV Shows&lt;/li&gt;
                      &lt;li id="tabHeader_2"&gt;Movies&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="tabContent"&gt;
                  &lt;div class="tabpage" id="tabpage_1"&gt;
                      &lt;?php
                          if (isset($sortFilt['year']))
                              unset($sortFilt['year']);
                          if ($sortField=="year")
                              $sortField==" ";
                          DisplaySearchPage("shows", $terms, $sortField, $sortDir, $sortFilt, $page, $perPage);
                      ?&gt;
                  &lt;/div&gt;
                  &lt;div class="tabpage" id="tabpage_2"&gt;
                      &lt;?php
                          DisplaySearchPage("movies", $terms, $sortField, $sortDir, $sortFilt, $page, $perPage);
                      ?&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/article&gt;
  &lt;script src="tabs.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And this is the the <code>tabs.js</code> script:</p>
  
  <pre><code>window.onload=function() {
  
    // get tab container
    var container = document.getElementById("tabContainer");
      // set current tab
      var navitem = container.querySelector(".tabs ul li");
      //store which tab we are on
      var ident = navitem.id.split("_")[1];
      navitem.parentNode.setAttribute("data-current",ident);
      //set current tab with class of activetabheader
      navitem.setAttribute("class","tabActiveHeader");
  
      //hide two tab contents we don't need
      var pages = container.querySelectorAll(".tabpage");
      for (var i = 1; i &lt; pages.length; i++) {
        pages[i].style.display="none";
      }
  
      //this adds click event to tabs
      var tabs = container.querySelectorAll(".tabs ul li");
      for (var i = 0; i &lt; tabs.length; i++) {
        tabs[i].onclick=displayPage;
      }
  
      // This below is is what I tried.
      var selTab = (getUrlVars()["type"] == "movies") ? 2 : 1;
      var selTab = (getUrlVars()["type"] == "movies") ? 1 : 0; // Tried this too.
      tabs[selTab].click();
  
      // its seems like it should have worked, what am I doing wrong.
  }
  
  // on click of one of tabs
  function displayPage() {
  
    var current = this.parentNode.getAttribute("data-current");
    //remove class of activetabheader and hide old contents
    document.getElementById("tabHeader_" + current).removeAttribute("class");
    document.getElementById("tabpage_" + current).style.display="none";
  
    var ident = this.id.split("_")[1];
    //add class of activetabheader to new active tab and show contents
    this.setAttribute("class","tabActiveHeader");
    document.getElementById("tabpage_" + ident).style.display="block";
    this.parentNode.setAttribute("data-current",ident);
  }
  </code></pre>
  
  <p>How can I adapt this script to let me decide which tab is displayed when the page is loaded based on what the <code>type</code> variable is in the URL parameters?</p>