twitter bootstrap模态和选项卡式导航

Question

我有模态打开，在那个模式我想显示标签导航。我有以下代码

<div id="TaskListDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
    <div class="modal-header">
        <h3>Task List</h3>
        </div>
    <div class="modal-body">
        <div class="tabbable"> <!-- Only required for left/right tabs -->
        <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
        </ul>
        <div class="tab-content">
        <div class="tab-pane active" id="tab1">
        Data 1
    </div>
           <div class="tab-pane" id="tab2">
<p>Data 2.</p>
</div>
</div>
        </div>
   </div>
    <div class="modal-footer">
             <a href="#" class="btn btn-primary" onclick="CloseTaskList();">Close</a>
        </div>
   </div>

我遇到的问题是modal会在第一个标签页面上启动，但在点击第二个标签页时没有任何反应。

我错过了什么，它没有加载第二个标签。

任何帮助高度赞赏。