Bootstrap 可切换标签栏答案

【问题标题】：Bootstrap Togglable tabs railsBootstrap 可切换标签栏
【发布时间】：2013-06-10 02:55:09
【问题描述】：

我想在 Rails 应用程序上使用 Twitter 的 Bootstrap 中的 Togglable Tabs，但我无法让它工作。

这是我的app/views/pages/home.html.erb：

<ul class="nav nav-tabs" id="dashboard_products">
  <li class="active"><a href="#owned_products"> 1 </a></li>
  <li><a href="#borrowed_products"> 2 </a></li>
  <li><a href="#given_products" > 3 </a></li>
  <li><a href="#requested_products"> 4 </a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="owned_products"> 1 </div>
  <div class="tab-pane" id="borrowed_products" > 2 </div>
  <div class="tab-pane" id="given_products" > 3 </div>
  <div class="tab-pane" id="requested_products" > 4 </div>
</div>

这是我的app/assets/javascripts/pages.js.coffee：

$ ->
  $('#dashboard_products a').click = (e) ->
    e.preventDefault() 
    $(this).tab('show')

这里是我的 app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .

我在哪里失败了？

【问题讨论】：

您的资产中是否包含引导 javascript？

标签： ruby-on-rails twitter-bootstrap coffeescript

【解决方案1】：

您缺少data-toggle 标签。

这是一个例子：

<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

【讨论】：

好的，这行得通！但是为什么关于tabs 的推特引导指南没有在方法段中显示data-toggle = "tab"？

【解决方案2】：

检查你是否包含了 bootstrap js ...并在包含 bootstrap js 后检查你是否包含了咖啡脚本文件。并且咖啡脚本包含也必须在您的 html 之后。因为 dom 必须在 init tabs 之前创建元素..

【讨论】：

我在我的问题中添加了一些信息。一切都井井有条吗？

【解决方案3】：

这里的例子

http://getbootstrap.com/javascript/#tabs

没有数据目标属性。

<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab" data-target="home">Home</a></li>

但是当我添加它时

<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>

这一切都奏效了。

【讨论】：