引导选项卡中的Rails 4 ajax加载内容

1. 如何更改每个单击的选项卡的活动状态

如果您看一下bootstrap tabs markup，它会显示：

您可以通过简单地在元素上指定data-toggle =“ tab”或data-toggle =“ pill”来激活选项卡或药丸导航，而无需编写任何JavaScript

因此，您的标记需要像这样：

/ Nav tabs
%ul.nav.nav-tabs
  %li.active
    =link_to "Tab1", "#tab1", html_options = { "data-toggle" => "tab" }
  %li
    =link_to "Tab2", "#tab2", html_options = { "data-toggle" => "tab" }
  %li
    =link_to "Tab3", "#tab3", html_options = { "data-toggle" => "tab" }

/ Tab panes
.tab-content
  .tab-pane.active#tab1
    %p Fetch content
  .tab-pane#tab2
    %ul.nav.nav-pills
      %li.active
        = link_to 'Overview', "#overview", html_options = { "data-toggle" => "tab"}
      %li
        = link_to 'Details', "#details", html_options = { "data-toggle" => "tab"}
      .tab-content
        .tab-pane.active#overview
          %p Fetch overview
        .tab-pane#details
          %p Fetch details
  .tab-pane#tab3
    %p Fetch content

注意：您只需要在要显示的选项卡上应用活动班级。

2. 如何ajax加载标签数据

一种。创建一个您希望您的ajax请求转到的定制路由，或者您可以仅使用show动作。

b。我们需要添加一些数据属性，以便我们知道正在单击哪个选项卡。然后，我们可以将其定位在后端。

/ Nav tabs
%ul.nav.nav-tabs
  %li.active
    =link_to "Tab1", "#tab1", data: {toggle: "tab", target: "admin", href: "#{your_show_action_path}
  %li
    =link_to "Tab2", "#tab2", data: {toggle: "tab", target: "member", href: "#{your_show_action_path}
  %li
    =link_to "Tab3", "#tab3", data: {toggle: "tab", target: "moderator", href: "#{your_show_action_path}
/ Tab panes
.tab-content
  .tab-pane.active#tab1
    %p // this will be activated by default so you can load default content here
  .tab-pane#tab2
    %ul.nav.nav-pills
      %li.active
        = link_to 'Overview', "#overview", html_options = { "data-toggle" => "tab"}
      %li
        = link_to 'Details', "#details", html_options = { "data-toggle" => "tab"}
      .tab-content
        .tab-pane.active#overview
          %p Fetch overview
        .tab-pane#details
          %p Fetch details
  .tab-pane#tab3
    %p Fetch content

C。使用JS触发您的Ajax请求

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var target = $(this).data("target");
  var href = $(this).data("href");
  $.ajax({
    type: "GET",
    url: href,
    data: {tab: target},
    dataType: "script"
  });
})

d。现在，您可以根据ajax请求发送的选项卡变量来加载选项卡内容。

def show
  @data_tab = User.admin
  @data_tab = User.member if params[:tab] == "member"
  @data_tab = User.moderator if params[:tab] == "moderator"
end

#show.js.erb
$(".tab-pane.active").html("your content here");

我想给每个选项卡窗格一个部分，如何在控制器中动态更改部分名称？我应该使用其他实例变量吗？

如果内容相同，则可以使用相同的局部变量和相同的实例变量，但是如果内容不同，则可以检查params以获得目标变量的值，然后相应地在js.erb中呈现局部变量

更新：

1：如何动态更改.tab-pane.active，就像我将成员和主持人设置为空的partials那样，这样当我单击“ member”选项卡时，partial将充满ajax数据并向该窗格添加“ active”类？

您无需在此处添加活动类，因为如果您的应用中包含bootstrap js，那么它将在您单击的选项卡上自动设置活动类， bootstrap docs

2：js.erb如何响应不同的实例变量并呈现不同的部分？

当您单击选项卡时，我们将获得数据目标属性，并将其作为params发送到ajax请求中，然后在js.erb文件中，我们正在检查这些param值以呈现局部。

3.如何防止以前单击的选项卡发送ajax请求？

不确定您的意思是什么，但是先前单击的选项卡不会也不应发送ajax请求。如果您快速单击2个选项卡，则发送2个Ajax请求是正常的，因为最后它总是会显示活动选项卡。