导轨 + 引导选项卡

Rails + Bootstrap Tabs

本文关键字：选项 导轨      更新时间：2023-09-26

我有一个使用 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>

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

我认为您在tab-contentdiv中缺少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>

演示

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

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

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

相关文章：