我想在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 .
我在哪里失败了?
解决方法
您缺少数据切换标记.
这是一个例子:
<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。