Twitter Bootstrap選項卡不工作在模式內

Question

在Rails應用程序中，我通過Ajax加載模態窗口（bootstrap modal）的內容。這工作正常。

此內容包含選項卡（引導選項卡）。這些標籤顯示正確，我可以點擊標籤，活動標籤會正確更改...但內容不會改變。

<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

愚蠢的錯誤。事實證明，我有第二個模態窗口呈現。

我的JavaScript更新了基於類名的模態的內容。通過使用正確的ID定位模式固定的東西。

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

代替

$('.modal-body') 

Answer 2

我測試你的代碼，並添加

"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語法。