0

現在のページに関連するリンク ボタンを強調表示する必要があります。

で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 は、私のアプローチは正しいですか?

4

2 に答える 2

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 と比較され、一致する場合はアクティブなクラスが追加されます。You should put something like this in the $(document).ready(function() {} section of your JS file. どの JS ファイルに追加するかについては、Asset Pipeline (Rails 3.1 +）またはあなたが言ったようにあなたのapplication.js。

于 2012-12-07T03:17:09.780 に答える
0

Rails 3.1 以降のアプリケーションのデフォルト設定を使用している場合は、.xml.js内の任意のファイルに配置できますapp/assets/javascripts。Rails アセット パイプライン ガイドのアセット構成に関するセクションを必ず確認してください。

于 2012-12-07T02:45:17.177 に答える