title: jQuery Hash Detection Internet Explorer
body: <p>I'm building navigation tabs using jQuery, and am detecting the URL hash value to use as a reference as to which navigation tab to go to on page load. For example, when someone goes to: example.com/profile.php#media, the 'media' tab is switched to automatically.</p>
  
  <p>My jQuery code works in Safari, Firefox, Chrome, and Opera, but does not work in any version of Internet Explorer (tested IE 6 - 10). Is there anything in my code that making it incompatible with IE?</p>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>$(document).ready(function() {
  
  tab = $('.tab');
  
  function switch_active_tab() {
      tab.removeClass('active_tab');
      $(this).addClass('active_tab');
  }
  
  function hash_detect() {
      hash = document.location.hash.replace('#','');
      active_tab_id = $('.active_tab').attr('id').replace('-manager', '');
      // check if hash value is valid
      if( hash == 'pages' || hash == 'media' || hash == 'templates' || hash == 'scripts' ) {
          // if hash is not the same as the active tab
          if( hash !== active_tab_id ) {
              tab.removeClass('active_tab');
              $(document.location.hash+'-manager').addClass('active_tab');
          }
      }
      else {
          document.location = '#pages';
      }
  
  }
  
  function hash_respond() {
      hash = document.location.hash.replace('#','');
      active_tab_id = $('.active_tab').attr('id').replace('-manager', '');
      if( hash !== active_tab_id ) {
          document.location = '#' + active_tab_id.replace('-manager', '');
      }
  }
  
  $(document).ready(hash_detect);
  $(window).bind('hashchange', hash_detect);
  tab.click(switch_active_tab);
  tab.click(hash_respond);
  
  });
  </code></pre>
  
  <p><strong>Corresponding HTML:</strong></p>
  
  <pre><code>&lt;div id="tab_wrapper"&gt;
      &lt;div class="tab active_tab" id="pages-manager"&gt;Pages&lt;/div&gt;
      &lt;div class="tab" id="media-manager"&gt;Media&lt;/div&gt;
      &lt;div class="tab" id="templates-manager"&gt;Templates&lt;/div&gt;
      &lt;div class="tab" id="scripts-manager"&gt;Scripts&lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>