title: Setting active tab based on url
body: <p>I have a simple tabbed interface that switches between hidden div and sets an active state on the appropriate tab when clicked.</p>
  
  <p>When someone visits the url of the tab, it shows the contents of that tab only, which is fine.</p>
  
  <p><strong>What I need it to do is also set the active state of that tab if you visited that url directly.</strong></p>
  
  <p>I've got url's such as abc.com/index.html#gallery, abc.com/index.html#recipes etc.</p>
  
  <p>So if you visit abc.com/index.html#recipes - the recipes tab is highlighted.</p>
  
  <p>My code is below, thanks in advance for any advice!</p>
  
  <pre><code>    $(function () {
  var app = {
          vars: {
              gallery: $('#gallery'),
              tabContent: $('.tabs .tabContent'),
              nav: $('.tabs nav a')
          },
          events: function () {
              //tabs
              app.vars.nav.on('click', function (e) {
                  var thisHash = $(this).attr('href');
                  app.setHash(thisHash);
                  e.preventDefault();
                  $('nav a').removeClass('active');
                  $(this).addClass('active');
              });
  
              //hashchange
              $(window).on('hashchange', function() {
                  app.checkHash();
              });
  
          },
          checkHash: function () {
              var hash = app.getHash();
  
              if (hash == '') {
                  app.vars.tabContent.hide();
                  app.vars.gallery.show();
              } else {
                  app.goTo(hash);
              }
  
          },
          getHash: function () {
              return window.location.hash;
          },
          setHash: function (id) {
              window.location.hash = id;
          },
          goTo: function (id) {
              app.vars.tabContent.hide();
              $(id).fadeIn();
          }
      }
  app.events();
  app.checkHash();
  
  
  });
  </code></pre>