Question

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

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

<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之后加载了标签吗？如果是这样，我该如何再次启用它们？

Answer 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语法。

Answer 2

愚蠢的错误。事实证明我有第二个模态窗口。

我的javascript根据类名更新了模态的内容。通过使用正确的ID修复事物来定位模态。

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

而不是

$('.modal-body')

Twitter Bootstrap选项卡无法在模态中运行

2 个答案: