title: Backbone.js with Twitter Bootstrap Tabs - Remove # in links
body: <p>I'm using Twitter bootstrap's tabs plugin and it requires the link that activates to tab to contain the URL fragment beginning with a <code>#</code> followed by the <code>id</code> of the div containing the tab's HTML content.</p>
  
  <pre><code> &lt;a href="#home" data-toggle="tab"&gt;Home&lt;/a&gt;
   &lt;div class="tab-pane" id="home"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>Is there any way to get rid of having to use the <code>#</code>? Also, I tried removing the <code>#</code> in link and clicking on the link somehow does not make the browser follow the link! </p>
  
  <p>I am using backbone.js and pushstates, so I'm looking to have the link not containing the <code>#</code>, and clicking on it should update the web address to <code>mydomain.com/home</code> instead of <code>mydomain.com/#home</code>.</p>
  
  <pre><code> &lt;a href="home" data-toggle="tab"&gt;Home&lt;/a&gt;
   &lt;div class="tab-pane" id="home"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>And...</p>
  
  <pre><code>$(function() {
      $('a[data-toggle="tab"]').on('shown', function(e) {
          // Update URL in address bar to trigger Backbone.js's router
          window.location.hash = e.target.hash;
      });
  });
  </code></pre>
  
  <p>Can this be done? Or am I better off using backbone.js to write my own tabs functionality?</p>