title: CSS tabs not working with anchors on bootstrap?
body: <h3>Attempt 1</h3>
  <pre><code>&lt;div class=&quot;bs-docs-example&quot;&gt;
      &lt;ul class=&quot;nav nav-tabs&quot;&gt;
          &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;aaa&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Profile&lt;/a&gt;fff&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Messages&lt;/a&gt;bbb&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong><a href="http://jsfiddle.net/fXbvt/" rel="nofollow noreferrer">JSfiddle</a></strong></p>
  <p>I have also tried setting a <code>data-toggle</code> attribute to &quot;tab&quot;, but that only allowed me to click between tabs, it didn't separate the aaa/fff/bbb into different tabs.</p>
  <p>This should be possible to be done without any JavaScript.</p>
  <h3>Attempt 2</h3>
  <p>The closest I've gotten to a working one is:</p>
  <pre><code>&lt;div class=&quot;tabbable&quot;&gt;
      &lt;ul class=&quot;nav nav-tabs&quot;&gt;
          &lt;li class=&quot;active&quot;&gt;
              &lt;a href=&quot;#ter&quot; data-toggle=&quot;tab&quot;&gt;Stir&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href=&quot;#gin&quot; data-toggle=&quot;tab&quot;&gt;Drink&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class=&quot;tab-content&quot;&gt;
          &lt;div class=&quot;tab-pane active&quot; id=&quot;ter&quot;&gt;fff&lt;/div&gt;
          &lt;div class=&quot;tab-pane&quot; id=&quot;gin&quot;&gt;ggg&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong><a href="http://jsfiddle.net/3N5Hk/" rel="nofollow noreferrer">JSfiddle</a></strong></p>
  <p>But this didn't change the URL of the viewer to <code>/#ter</code> or <code>/#gin</code> on click. Also it doesn't seem to work normally in the fiddle...</p>