Twitter Bootstrap 选项卡在模式中不起作用答案

【问题标题】：Twitter Bootstrap tabs not working within a modalTwitter Bootstrap 选项卡在模式中不起作用
【发布时间】：2011-12-23 06:26:23
【问题描述】：

在 Rails 应用程序中，我通过 Ajax 加载模式窗口（引导模式）的内容。这很好用。

此内容包含选项卡（引导选项卡）。选项卡显示正确，我可以点击选项卡，活动选项卡会正确更改...但内容不会更改。

<div id="negotiation-details">
  <div id="negotiation-overview"></div>

  <ul id="nego-tabs-menu" class="tabs">
    <li class="active"><a href="#nego-figures">Figures</a></li>
    <li><a href="#nego-dates">Dates</a></li>
    <li><a href="#nego-characteristics">Characteristics</a></li>
  </ul>
  <div id="my-tab-content" class="tab-content">
    <div id="nego-figures" class="tab-pane active">figures content</div>
    <div id="nego-dates" class="tab-pane">dates content</div>
    <div id="nego-characteristics" class="tab-pane">characteristics content</div>
  </div>
</div>

你有什么想法吗？可能是因为标签是在 DOM 之后加载的吗？如果是这样，我怎样才能再次启用它们？

【问题讨论】：

标签： jquery ruby-on-rails twitter-bootstrap

【解决方案1】：

我测试了你的代码，添加了一个

"data-toggle"=>"tab"

到每个选项卡菜单项，如下所示：

#negotiation-details
  #negotiation-overview
  %ul#nego-tabs-menu.tabs
    %li.active
      %a{:href => "#nego-figures","data-toggle"=>"tab"} Figures
    %li
      %a{:href => "#nego-dates","data-toggle"=>"tab"} Dates
    %li
      %a{:href => "#nego-characteristics","data-toggle"=>"tab"} Characteristics
  #my-tab-content.tab-content
    #nego-figures.tab-pane.active figures content
    #nego-dates.tab-pane dates content
    #nego-characteristics.tab-pane characteristics content

附言。对不起，haml 语法。

【讨论】：

感谢您的建议，但在模态中不起作用（尽管如果通过“正常”动作呈现它会起作用）。因此，问题似乎确实出现在将代码渲染为 Ajax 调用的结果时。还在寻找。圣诞快乐！

【解决方案2】：

愚蠢的错误。原来我渲染了第二个模态窗口。

我的 javascript 根据类名更新了模态框的内容。通过使用正确的 id 定位模式来修复问题。

$('#modal-window .modal-body')

而不是

$('.modal-body')

【讨论】：