Twitter Bootstrap - Tabs - URL doesn't change

Question

I'm using Twitter Bootstrap and its "tabs".

I have the following code:

<ul class="nav nav-tabs">     <li class="active"><a data-toggle="tab" href="#add">add</a></li>     <li><a data-toggle="tab" href="#edit" >edit</a></li>     <li><a data-toggle="tab" href="#delete" >delete</a></li> </ul> 

The tabs work properly, but the in the URL is not added the #add, #edit, #delete.

When I remove data-toggle the URL changes, but the tabs don't work.

Any solutions for this?

Answer 1

Try this code. It adds tab href to url + opens tab based on hash on page load:

$(function(){   var hash = window.location.hash;   hash && $('ul.nav a[href="' + hash + '"]').tab('show');    $('.nav-tabs a').click(function (e) {     $(this).tab('show');     var scrollmem = $('body').scrollTop() || $('html').scrollTop();     window.location.hash = this.hash;     $('html,body').scrollTop(scrollmem);   }); });