如何使用twitter-bootstrap框架在同一选项卡中加载外部页面? [英] How can I load external pages in the same tab with twitter-bootstrap framework?

问题描述

在使用的标签页上的基本标签页示例中，我找不到第一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>

所有存储库" 默认情况下处于活动状态，但是例如，当我单击 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页面.

I can't find examples of "first senario" in Basic tabs example on Tabs used as regular navigation (loading external pages in the same tab).

I've this tabs :

  <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", is active by default, but when I click cms for example, I get the page but the tab doesn't get active.

Here the rest of the page I get back :

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

I need to have tabs containing pages (not relative content insight the page), something like the following example: http://rails-admin-tb.herokuapp.com/admin/balls, but it doesn't work.

Any idea ?

解决方案

Coming form others js plug-in behaviors, I didn't realize it was so simple.

Thanks to jasny for clarifying :

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框架在同一选项卡中加载外部页面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！