Rails + Bootstrap 选项卡

Question

我有一个使用 Bootstrap 选项卡的 rails 应用程序。默认选项卡是 rails js.erb 部分，但我无法弄清楚如何在页面加载时无需单击选项卡来渲染它。

我的标签的代码如下所示：

<div id="artist_tabs" class="span12">
  <section class="widget widget-tabs">
    <header>
      <ul class="nav nav-tabs offset3">
        <li class="active"><%= link_to "Albums", albums_artist_path, 'data-toggle' => 'tab', :remote => true %></li>
        <li><%= link_to "Biography", artist_path(@artist), 'data-toggle' => 'tab', :remote => true %></li>
      </ul>
    </header>
    <div class="body tab-content">
      <div id="Albums" class="tab-pane active clearfix"></div>
      <div id="Biography" class="tab-pane"></div>
    </div>
  </section>
</div>

我的问题是让我的默认（活动）选项卡在页面加载时呈现部分内容而无需单击它的最佳方式是什么？

我尝试在内容 div 中包含渲染部分的代码，如下所示：

<div id="Albums" class="tab-pane active clearfix">
  <%= render 'albums', :remote => true %>
</div>

但随后它会呈现在所有选项卡上。

Answer 1

我通过将以下代码添加到我的 javascript 文件中来解决此问题：

$.ajax({
      url: "url to default link_to path",
      cache: false,
      success: function(html){

      }
  });

如果有更好的方法，请发布。

Answer 2

我认为您在 tab-content div 中缺少 active 类。

这是一个例子：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8 well">
            <ul class="nav nav-tabs">
                <li class="active"> <a href="#home" data-target="#home" data-toggle="tab">Home</a>

                </li>
                <li><a href="#profile" data-target="#profile" data-toggle="tab">Profile</a>

                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active fade in" id="home">home tab content</div>
                <div class="tab-pane" id="profile">profile tab content</div>
            </div>
        </div>
    </div>
</div>

DEMO