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.