3

2 つのタブがあるこのナビゲーション メニューがあります。

<div id="user_menu">
 <ul class="nav nav-tabs">
  <li class="active"><%= link_to "Group1", group1_friends_path(@user), :remote => true %></li>
  <li><%= link_to "Group2", group2_friends_path(@user), :remote => true %></li>
 </ul>
</div>

Ajax に特定のパーシャルをレンダリングさせることができました。ここで、タブをクリックすると、パーシャルがターゲット プレースホルダー div に読み込まれます。これを処理するために、この jquery スクリプトを作成しました。

tab.js: assest/javascripts/ に配置しました

$('#user_menu a').click(function (e) {
    $('ul.nav-tabs li.active').removeClass('active')
    $(this).parent('li').addClass('active')
})

私のapplication.jsは次のようになります。

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

どんな助けでも大歓迎です。

4

1 に答える 1

0

これを試して。たぶん、ドキュメントの準備が整う前に実行されているのでしょうか。

$(function() {
  $('#user_menu a').click(function (e) {
    $('ul.nav-tabs li.active').removeClass('active')
    $(this).parent('li').addClass('active')
  });
});
于 2012-07-30T00:25:14.397 に答える