加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

ruby-on-rails – Rails Twitter Bootstrap:标签在Ajax渲染部分

发布时间:2020-12-17 03:46:35 所属栏目:百科 来源:网络整理
导读:所以我有一个用户配置文件,其中包含一个标签导航: 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,:data =
所以我有一个用户配置文件,其中包含一个标签导航:

<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,:data => {:toggle=>"tab"} %></li>
    </ul>
</div>
<div class="row">
    <div id="profile" class="span9">

    </div>
</div>

我设法让Ajax渲染某些部分内容.
现在,当我单击选项卡时,部分加载到我的目标占位符div中.但我的问题是选项卡列表项不会更改其活动类,具体取决于呈现的部分.真的不知道如何解决这个问题.

我认为它与链接或ID有关.当我像引导程序文档中那样构建选项卡时(使用隐藏和显示的div)它可以很好地工作.但我认为它无论如何都无法正确处理部分问题.我希望有一个人可以帮助我!
谢谢!

的routes.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');
})

解决方法

实际上你根本不需要bootstrap javascript for tabs.我从链接中删除了数据切换,并将我的javascript更改为:

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

工作完美!

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读