我如何加载外部页面在同一选项卡与推特引导框架

How can I load external pages in the same tab with twitter-bootstrap framework?

本文关键字：选项 框架 何加载 加载 外部      更新时间：2023-09-26

我在基本选项卡示例中找不到"第一场景"的例子，该选项卡用于常规导航(在同一选项卡中加载外部页面)。

我有这些标签:

  <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，但它不起作用。

来自其他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

相关文章：