Как я могу загрузить внешние страницы в той же вкладке с помощью twitter-bootstrap framework?

Question

Я не могу найти примеры "первого сенарио" в Пример основных вкладок на вкладках, используемых для обычной навигации (загрузка внешних страниц в той же вкладке).

У меня есть следующие вкладки:

  <ul class='tabs'>
    <li class='active'><a href='/' id=''>All Repos</a></li>
    <li><a href='/cms/watchers' id='cms'>CSS</a></li>
    <li><a href='/css/watchers' id='css'>CMS</a></li>
    <li><a href='/ruby/watchers' id='ruby'>CMS</a></li>
    <li><a href='/framework/watchers' id='framework'>CMS</a></li>
  </ul>

«Все операции» , по умолчанию активен, но когда я нажимаю, например, cms , я получаю страницу, но вкладка не становится активной.

Вот остальная часть страницы, которую я получаю:

  <div class='tab-content'>
    <div class='active tab-pane' id='cms'></div>
      <table>
        <thead>
          <tr class='row'>
            <th>repo</th>
            <th>watchers</th>
            <th>forks</th>
            <th>description</th>
            <th>created</th>
            <th>pushed</th>
            <th>tags</th>
          </tr>
        </thead>
        <tbody>
          <tr class='row'>
            <td>
              <a href="https://github.com/mojombo/jekyll">mojombo/jekyll</a>
            </td>
            <td>4473</td>
            <td>715</td>
            <td>Jekyll is a blog-aware, static site generator in Ruby</td>
            <td>Mon, Oct 20 at  6:29am</td>
            <td>Sun, Nov 27 at  2:48am</td>
            <td class='4ee287831d41c8281f000166'>cms</td>
          </tr>
        </tbody>
      </table>
  </div>
  <script>
    //<![CDATA[
      $(function () {
        $('.tabs').tabs()
      })
    //]]>
  </script>

Мне нужно иметь вкладки, содержащие страницы (а не относительное содержание, чтобы понять страницу), что-то вроде следующего примера: http://rails -admin-tb.herokuapp.com / admin / balls , но это не работает.

Есть идеи?

Answer 1

Приходя из поведения других плагинов, я не осознавал, что это было так просто.

Спасибо jasny за разъяснения:

Если вы загружаете разные страницы, вам не нужен javascript, поскольку вы можете просто вывести правильный HTML. Таким образом, решение этого в вашем коде на стороне сервера (Ruby, PHP, Phyton или любой другой).

  <!-- URL: / -->
  <ul class='tabs' data-tabs='tabs'>
    <li class='active'><a href="/">Home</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>

  <!-- URL: /cms/watchers -->
  <ul class='tabs' data-tabs='tabs'>
    <li><a href="/">Home</a></li>
    <li class='active'><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>

Так что используйте JavaScript только в том случае, если вы хотите иметь возможность переключать вкладки без перезагрузки страницы.