Question

I’m having an issue with Twitter Bootstrap CSS framework: the tabs show up, the mouse over highlight tabs when I pass, when I click I get the page …, but the clicked tub doesn’t stay active. The only active tab is the first.

Here is the generated code :

<div class='container'>
  <ul class='tabs' data-tabs='tabs'>
    <li class='active'><a href="/">All Repos</a></li>
    <li><a href="/cms/watchers">CMS</a></li>
    <li><a href="/css/watchers">CSS</a></li>
    <li><a href="/ruby/watchers">Ruby</a></li>
    <li><a href="/framework/watchers">Framework</a></li>
  </ul>
  <div class='tab-content'>
    ...
        <tbody>
          <tr class='row'>
            <td class='gravatar'>
              <img alt="Assets.github.com%2fimages%2fgravatars%2fgravatar-orgs" height="36" src="https://secure.gravatar.com/avatar/74e977ae0a10f06057a119eef30c6660?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-orgs.png" width="36" />
            </td>
            <td>
              <a href="https://github.com/twitter/bootstrap">twitter/bootstrap</a>
            </td>
            <td>11942</td>
            <td>2042</td>
            <td>HTML, CSS, and JS toolkit from Twitter</td>
            <td>Fri, Jul 29 at  9:19pm</td>
            <td>Fri, Dec  9 at  8:10pm</td>
            <td class='4ee287a91d41c8281f000611'>css</td>
            <td><a href="/tagging?id=4ee287a91d41c8281f000611&amp;tags_string=css" class="button icon tag add-tag" type="submit">Add tag</a></td>
          </tr>
          <tr class='row'>
            <td class='gravatar'>
              <img alt="Assets.github.com%2fimages%2fgravatars%2fgravatar-orgs" height="36" src="https://secure.gravatar.com/avatar/30f39a09e233e8369dddf6feb4be0308?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-orgs.png" width="36" />
            </td>
            <td>
              <a href="https://github.com/rails/rails">rails/rails</a>
            </td>
            <td>11467</td>
            <td>2473</td>
            <td>Ruby on Rails</td>
            <td>Fri, Apr 11 at  2:19am</td>
            <td>Fri, Dec  9 at  9:01pm</td>
            <td class='4ee287791d41c8281f000058'>framework</td>
            <td><a href="/tagging?id=4ee287791d41c8281f000058&amp;tags_string=framework" class="button icon tag add-tag" type="submit">Add tag</a></td>
          </tr>

…. this is the JS :

$(function () {
  $('.tabs').tabs()
})

Main JS are bootstrap-tabs.js v1.4.0 with jquery/1.6.4/jquery.min.js, but follow etire list :

<!-- javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script>$(function () { prettyPrint() })</script>
<script src="1.4.0/bootstrap-modal.js"></script>
<script src="1.4.0/bootstrap-alerts.js"></script>

<script src="1.4.0/bootstrap-twipsy.js"></script>
<script src="1.4.0/bootstrap-popover.js"></script>
<script src="1.4.0/bootstrap-dropdown.js"></script>
<script src="1.4.0/bootstrap-scrollspy.js"></script>
<script src="1.4.0/bootstrap-tabs.js"></script>
<script src="1.4.0/bootstrap-buttons.js"></script>

Answer 1

I figured it out.
It was jquery-ui that was conflicting with bootstrap tabs.

… that makes TK Kocheran working,

but I’ve still some issue whith my sample,
please have a look at this.