Twitter Bootstrap CSS Framework: при нажатии на вкладки не активируется

Question

У меня проблема с Twitter Bootstrap CSS framework : отображаются вкладки, при наведении мыши на вкладки выделения, когда я нажимаю, я получаю страницу ..., но по нажатой ваннене остается активным.Единственная активная вкладка - первая.

Вот сгенерированный код:

<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>

.... это JS:

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

Основные JSbootstrap-tabs.js v1.4.0 с jquery / 1.6.4 / jquery.min.js, но следуйте списку рассылки:

<!-- 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

Вы используете таблицу для разметки, а не divs.Я уверен, что в плагине он фильтрует, чтобы работать только на div.Попробуйте что-то вроде:

<ul class="tabs" data-tabs="tabs">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
    <li class="dropdown" data-dropdown="dropdown">
        <a href="#" class="dropdown-toggle">Dropdown</a>
        <ul class="dropdown-menu">
            <li><a href="#fat">@fat</a></li>
            <li><a href="#mdo">@mdo</a></li>
        </ul>
    </li>
</ul>

<div id="my-tab-content" class="tab-content">
    <div class="active tab-pane" id="home">
        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt
        tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor,
        williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
        dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex
        squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan
        american apparel, butcher voluptate nisi qui.</p>
    </div>

    <div class="tab-pane" id="profile">
        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin
        coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next
        level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo
        booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco
        ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna
        delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente
        labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit,
        sustainable jean shorts beard ut DIY ethical culpa terry richardson
        biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui
        sapiente accusamus tattooed echo park.</p>
    </div>

    <div class="tab-pane" id="messages">
        <p>Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic
        exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master
        cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck
        pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu
        consequat whatever cardigan nostrud. Helvetica you probably haven't heard of
        them carles, marfa veniam occaecat lomo before they sold out in shoreditch
        scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch
        fap echo park pitchfork mustache dolor.</p>
    </div>

    <div class="tab-pane" id="settings">
        <p>Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats
        seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table
        carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse
        mollit high life, next level Austin nesciunt american apparel twee mustache
        adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1
        commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four
        loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral
        retro consectetur gentrify fap.</p>
    </div>

    <div class="tab-pane" id="fat">
        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out
        mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.
        Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard
        locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy
        irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi
        whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice
        blog. Scenester cred you probably haven't heard of them, vinyl craft beer
        blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
    </div>

    <div class="tab-pane" id="mdo">
        <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party
        before they sold out master cleanse gluten-free squid scenester freegan cosby
        sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high
        life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before
        they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf
        viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf
        salvia freegan, sartorial keffiyeh echo park vegan.</p>
    </div>
</div>

Answer 2

Я понял это.Это был jquery-ui, который конфликтовал с вкладками начальной загрузки.

..., который заставляет TK Kocheran работать,

, но у меня все еще есть некоторые проблемы с моим образцом,пожалуйста, посмотрите на это .