将 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

使用

$('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 进行比较，然后添加活动类（如果它们匹配）。你应该在JS文件的$（document）.ready（function（） {}部分放这样的东西。至于你把它添加到哪个JS文件，它可以是资产管线（Rails 3.1+）或你的应用程序中包含的任何文件.js正如你所说。

Answer 2

如果您使用的是 Rails 3.1 或更高版本应用程序的默认设置，则可以将其放置在 app/assets/javascripts 内的任何.js文件中。请务必查看 Rails 资产管道指南中有关资产组织的部分