0

私のナビゲーション バーでは、項目の 1 つをクリックすると、css クラス「current-menu-item」がアクティブになるようにしています。これはある程度機能します。私のJqueryコードは次のとおりです。

$(document).ready(function(){
  $("li.menu").click(function(){
    $("li.menu").removeClass("current-menu-item");
    $(this).addClass("current-menu-item");
  });
});

これはレールlink_toです：

<li class="menu">
  <%= link_to "home", root_url %>
</li>

これに関する唯一の問題は、このコードがリダイレクトの前に実行されることです。そのため、新しいページがロードされて削除される前に、クラスがアクティブになっていることをすぐに確認できます。

このジレンマを解決する最も簡単な方法は何ですか?

4

1 に答える 1

0

これをサーバー側ではなく JavaScript で行う場合は、メニュー リンクwindow.location.pathnameの属性と比較できます。href

このようなもの：

$.each("li.menu", function(i, menuItem) {
  if (menuItem.attr("href") === window.location.pathname) {
    menuItem.addClass("current-menu-item");
  }
});

これは、パス名が属性と正確に一致しないと機能しないhrefため、エラーが発生しやすいことに注意してください。

于 2013-06-21T20:57:53.340 に答える