title: JS/JQUERY TAB with history, compatibility
body: <p>Ok I have a website which have several tabs showing different things. I did a very simple thing to manage tabs:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;li id="thing1" class="tab selected"&gt;&lt;/li&gt;
  &lt;li id="thing2" class="tab"&gt;&lt;/li&gt;
  &lt;li id="thing3" class="tab"&gt;&lt;/li&gt;
  
  &lt;div id="_thing1" class="box"&gt;&lt;/div&gt;
  &lt;div id="_thing2" class="box hidden"&gt;&lt;/div&gt;
  &lt;div id="_thing3" class="box hidden"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS/JQUERY:</p>
  
  <pre><code>$(".tab").on('click', function() {
          $(".tab").removeClass('selected');
          $(this).addClass('selected');
          $(".box").addClass('hidden');
          $( '#_' + $(this).attr('id') ).removeClass('hidden');
      }); 
  </code></pre>
  
  <p>Everything works fine, but I'm trying to add history to my tab click, so when you click back on your browser, you go to the last tab you've visited.</p>
  
  <p>I've done some research, and i'm a little confused, it seems a lot of things i need to achieve my goal are not compatible with all browser. Jquery has not implemented things related to history.</p>
  
  <p>for example : on('hashchange') is not compatible with every browser it seems.</p>
  
  <p>This is what I started:</p>
  
  <pre><code>$(".tab").on('click', function() {
  history.pushState({id: $(this).attr('id')}, $(this).attr('id'), '#'+$(this).attr('id'));
  }
  </code></pre>
  
  <p>So is there any way I can achieve what i want, without plugins, and easily?</p>