将 Javascript 添加到应用程序布局视图页面

Question

我需要突出显示与当前页面相关的链接按钮。

在apps/views/layouts/application.html.erb:

<ul class="nav nav-tabs">
    <li class="link_style"><a href="/">link1</a></li>
    <li class="link_style"><a href="/about">link2</a></li>
    <li class="link_style"><a href="/posts">link3</a></li>
</ul>

我打算将以下内容添加到一些 .js 文件中

$('li.link_style').on('click', function(){
    $(this).addClass('active'); // and then add active class for clicked element.
});​

我认为这会很好。但是，我不确定应该在哪个 .js 文件中添加 js 代码。我的猜测是/app/views/layouts/application.js.erb 我的方法对吗？

Answer 1

如果您为 Rails 3.1 或更高版本的应用程序使用默认设置，则可以将其放置在 app/assets/javascripts 内的任何 .js 文件中。请务必查看Rails Asset Pipeline Guide中的section on asset organization

Answer 2

使用

$('li.link_style').on('click', function(){
   $(this).addClass('active'); // and then add active class for clicked element.
});​

将不起作用，因为单击链接时将重新加载页面（和 JS）。更有用的东西可能是这样的：

$(document).ready(function() {
  $(".nav li.link_style").each(function(){
    var link = $(this).find($(a));
    if(window.location.pathname == link.attr("href")){
      link.addClass("active");
    }
  });
});

这将遍历 nav 类中的所有 li 元素，并将当前页面的路径与链接的 href 进行比较，如果它们匹配，则添加 active 类。您应该在 JS 文件的 $(document).ready(function() {} 部分中添加类似的内容。至于将其添加到哪个 JS 文件中，它可以是 Asset Pipeline (Rails 3.1) 中包含的任何内容+) 或您所说的 application.js。