Bootstrap togglable tabs

by nobuts

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css">
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-transition.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tab.js"></script>
<div class="tabbable">
    <ul id="myTab" class="nav nav-tabs">
      <li><a data-href="#home" data-toggle="tab">Home</a></li>
      <li><a data-href="#profile" data-toggle="tab">Profile</a></li>
      <li><a data-href="#messages" data-toggle="tab">Messages</a></li>
      <li><a data-href="#settings" data-toggle="tab">Settings</a></li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane fade in active" id="home">HOME ...  Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. </div>
      <div class="tab-pane fade in " id="profile">PROFILE ... Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>
      <div class="tab-pane fade in " id="messages">MESSAGES ... Aliquip placeat salvia cillum iphone. </div> 
      <div class="tab-pane fade in " id="settings">SETTING ... Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>
    </div>
</div>

JavaScript

// cache the id
var navbox = $('#myTab');
// activate tab on click
navbox.on('click', 'a', function (e) {
  var $this = $(this);
  // prevent the Default behavior
  e.preventDefault();
  // set the hash to the address bar
  window.location.hash = $this.attr('data-href');
  // activate the clicked tab
  $this.tab('show');
});

function refreshHash(){
    navbox.find('a[data-href="'+window.location.hash+'"]').tab('show');
}

$(window).bind('hashchange', function() {
    refreshHash();
});

// if we have a hash in the address bar
if(window.location.hash){
  // show right tab on load (read hash from address bar)
  refreshHash();
}