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

我认为您缺少 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