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文件，它可以是Asset Pipeline中包含的任何东西（Rails 3.1） +）或你的application.js如你所说。

Answer 2

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

中的Rails Asset Pipeline Guide

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

2 个答案: