4

だから私はそれにタブナビゲーションを持つユーザープロファイルを持っています:

<div id="proftab">
    <ul class="nav nav-tabs">
          <li class="active">
            <%= link_to "About", about_users_path, :remote => true, :data => {:toggle=>"tab"} %>
          </li>
          <li><%= link_to "Pictures", pictures_users_path, :remote => true, :data => {:toggle=>"tab"} %></li>
    </ul>
</div>
<div class="row">
    <div id="profile" class="span9">

    </div>
</div>

Ajax に特定のパーシャルをレンダリングさせることができました。ここで、タブをクリックすると、パーシャルがターゲット プレースホルダー div に読み込まれます。しかし、私の問題は、どのパーシャルがレンダリングされたかに応じて、タブリスト項目がアクティブなクラスを変更しないことです。これを修正する方法が本当にわかりません。

リンクまたはIDに関係があると思います。ブートストラップ ドキュメントのようにタブを作成すると (div が非表示および表示されます)、完全に機能します。しかし、どういうわけかパーシャルを正しく処理できないと思います。誰かが私を助けてくれることを願っています！どうも！

ルート.rb

get "users/about" => 'users#about', :as => :about_users

get "users/pictures" => 'users#pictures', :as => :pictures_users

users_controller.rb

class UsersController < ApplicationController
  before_filter :authenticate_user!

  def index
    @users = User.all
  end

  def show
    @user = User.find(params[:id])
  end

  def about
    respond_to do |format|
      format.js
    end
  end

  def pictures
    respond_to do |format|
      format.js
    end
  end
end

ビュー/ユーザー/about.js.erb

$("#profile").html("<%= escape_javascript(render(:partial => 'about')) %>");

ビュー/ユーザー/pictures.js.erb

$("#profile").html("<%= escape_javascript(render(:partial => 'pictures')) %>");

ビュー/ユーザー/_about.html.erb

<div class="tab-pane active" id="#about">
     about
</div>

ビュー/ユーザー/_pictures.html.erb

<div class="tab-pane active" id="#pictures">
     pictures
</div>

tabs.js

$('#proftab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
})
4

1 に答える 1

8

実際には、タブのブートストラップ JavaScript はまったく必要ありません。リンクから data-toggle を削除し、javascript を次のように変更しました。

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

完璧に機能しました！

于 2012-06-18T11:22:48.833 に答える