如何使用twitter-bootstrap框架在同一选项卡中加载外部页面？

Question

我在用作常规导航的选项卡的“ 基本”选项卡示例中找不到“第一senario” 示例 （在同一选项卡中加载外部页面）。

我有这些标签：

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

默认情况下， “ All Repos”处于活动状态，但是例如，当我单击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

从其他js插件行为来看​​，我没有意识到它是如此简单。

感谢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。