Question

我无法在用作常规导航的标签Basic tabs example中找到“first 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>

“所有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澄清：

If you're loading different pages there is no need for the javascript, as you can simply output the correct HTML. So solving it in your server side code (Ruby, PHP, Phyton or whatever).

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

So only use the javascript if you want to be able to switch tabs without reloading the page.

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

1 个答案: