使用 Javascript 的 Rails 选项卡式视图

Question

我正在尝试在我的 Rails 应用程序中使用制表符，所以我有：

<%= stylesheet_link_tag "example", "example-print" %>
<%= javascript_include_tag 'tabber.js' %>

<script>

/* Optional: Temporarily hide the "tabber" class so it does not "flash"
   on the page as plain HTML. After tabber runs, the class is changed
   to "tabberlive" and it will appear. */

document.write('tabber{display:none;}');
</script>

<div class="tabber">

     <div class="tabbertab">
    <h2>Tab 1</h2>
    <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put }) do |f| %>
      <%= devise_error_messages! %>
      <div><%= f.label :peeruser %><br />
      <%= f.select :peeruser, [['Not yet','not yet'],['Beginner','beginner'],['Intermediate','intermediate'],['Expert','expert']] %></div>

      <div><%= f.label :discipline %><br />
      <%= f.text_field :discipline %></div>

      <div><%= f.label :course %><br />
      <%= f.text_field :course %></div>

      <div><%= f.label :concept %><br />
      <%= f.select :concept, [['Yes','yes'],['No','no']] %></div>

      <div><%= f.submit "Continue" %></div>
    <% end %>
     </div>


     <div class="tabbertab">
    <h2>Tab 2</h2>
    <p>Tab 2 content.</p>
     </div>


     <div class="tabbertab">
    <h2>Tab 3</h2>
    <p>Tab 3 content.</p>
     </div>

</div>

<%= link_to "Back", :back %>

而且我无法弄清楚为什么它没有像示例那样正确加载：

http://www.barelyfitz.com/projects/tabber/

我将 javascript if 放在 public->javascripts 下，将 css 放在 public->stylesheets 下 - 喜欢它只显示文本，没有一个是可链接的，它显示所有表单信息。

Answer 1

不完全是一个解决方案，但为什么不使用更流行且功能丰富的库呢？

JqueryUI 具有一种很好且简单的方式来实现选项卡。
加载库后，您所要做的就是

<script>
$(function() {
    $( ".tabber" ).tabs();
});
</script>

添加一些链接，重新分类所有 div 和 bam ！即时标签。
另外，您还拥有所有 Jquery Lib，这真是太棒了。

Answer 2

事实证明，我没有将 css 和 js 放在资产文件夹中，这导致了问题。