Activate selected tab after page reload

Last week I faced an interesting problem where I had to activate the selected tab after page refresh. Here is code snippet.

<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li> // first Active tab.
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li> 
  <li><a href="#settings" data-toggle="tab">Settings</a></li> 
</ul>

  <div class="tab-content">
  <div class="tab-pane active" id="home"> // selected tab
  Home page
  </div>
  <div class="tab-pane" id="profile"> // unselected tab
  Profile page
  </div>
  <div class="tab-pane" id="messages"> // unselected tab

  </div>
  <div class="tab-pane" id="settings"> // unselected tab
  Setting page
  </div>
 </div>

If I reload page then it always show me Home page div because li tag of home page has active class.
I ran this snippet using jquery-2.1.0.min.js, bootstrap.js, bootstrap-responsive.css and bootstrap.css(version 2.3.2). My requirement was to activate selected tab. Here is code snippet to show activated tab.

<script type="text/javascript">
    var url = document.location.toString(); // select current url shown in browser.
    if (url.match('#')) {
        $('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show'); // activate current tab after reload page.
    }
    // Change hash for page-reload
    $('.nav-tabs a').on('shown', function (e) { // this function call when we change tab.
        window.location.hash = e.target.hash; // to change hash location in url.
    });
</script>

It will help you to activate selected tab.