无法加载 zurb 基础 javascript

Question

编辑

我决定改用twitter-bootstrap-rails，我不需要答案。

编辑结束

我想在我的 rails 项目中使用 zurb-foundation 选项卡功能，但它不像这张图片那样工作。

似乎没有加载javascript，但我找不到原因。

我在Gemfile 中添加了两行。

gem 'compass-rails'
gem "foundation-rails"

然后是bundle install，然后是rails g foundation:install。

app/assets/javascripts/application.js 有这样的行。

//= require jquery
//= require jquery_ujs
//= require foundation
//= require_tree .

$(function(){ $(document).foundation(); });

而app/assets/stylesheets/application.css是这样的。

 /*
 *= require_self
 *= require foundation_and_overrides
 *= require foundation
 *= require_tree .
 */

我从基础网页复制并粘贴了示例 html 代码。

<p id="notice"><%= notice %></p>
<dl class="tabs">
  <dd class="active"><a href="#simple1">Simple Tab 1</a></dd>
  <dd><a href="#simple2">Simple Tab 2</a></dd>
  <dd class="hide-for-small"><a href="#simple3">Simple Tab 3</a></dd>
</dl>
<ul class="tabs-content">
  <li class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
  <li id="simple2Tab">This is simple tab 2s content. Now you see it!</li>
  <li id="simple3Tab">This is simple tab 3s content.</li>
</ul>

rails server 日志表明基础 JavaScript 已正确加载。

Started GET "/assets/foundation.css?body=1" for 127.0.0.1 at 2014-04-21 06:20:31 +0900
Started GET "/assets/jquery.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:31 +0900
Started GET "/assets/jquery_ujs.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:31 +0900
Started GET "/assets/foundation/foundation.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.abide.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.accordion.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.alert.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.clearing.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.dropdown.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.interchange.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.joyride.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.magellan.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.offcanvas.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.orbit.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.reveal.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.slider.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.tab.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.tooltip.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.topbar.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900
Started GET "/assets/foundation/foundation.equalizer.js?body=1" for 127.0.0.1 at 2014-04-21 06:20:32 +0900

我在chrome中通过开发者工具查看了控制台日志，但没有记录错误。

我还能做些什么来解决这个问题？

Answer 1

根据共享代码，我没有看到application.css 文件的详细信息。要使 zurb-foundation css 正常工作，您需要在 app/assets/stylesheets/application.css 文件中添加以下内容：

*= require foundation

更新

根据application.css 问题中的更新。

1. 首先您需要将application.css 重命名为application.css.scss。

2. 然后在foundation_and_overrides.scss顶部添加以下指令。

   @import "foundation"; 
   

3. 假设foundation_and_overrides.scss 存在于app/assets/stylesheets 文件夹中，您不需要在application.css.scss 中使用它。所以，application.css.scss 应该只有

   *= require_self
   *= require_tree .
   

另外，您可以在 Zurb Foundation Documentation

中查看详细信息