导航到模态中的Bootstrap选项卡

时间:2015-08-31 17:30:11

标签: javascript html twitter-bootstrap tabs bootstrap-modal

我正在使用bootstrap,我在模式弹出窗口中有一个标签式导航系统,我想要页面上的按钮,这将触发弹出窗口,然后转到弹出窗口中的特定选项卡。

更复杂的是,我想要访问的选项卡位于模式中的主选项卡式导航系统中(选项卡中的选项卡)。我想要一个按钮,触发“第4部分”

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>



<div class="container">
  <div class="tabbable">
    <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">
        <p>I'm in Section 1.</p>
      </div>
      <div class="tab-pane" id="tab2">
        <p>I'm in Section 2.</p>
        <div class="span8">
        <div class="tabbable tabs-left">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#tab3" data-toggle="tab">Section 3</a></li>
          <li><a href="#tab4" data-toggle="tab">Section 4</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="tab3">
            <p>I'm in Section 3.</p>
          </div>
          <div class="tab-pane" id="tab4">
            <p>I'm in Section 4.</p>
          </div>
        </div>
        </div>
      </div>      
      </div>
    </div>
  </div>
</div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

0 个答案:

没有答案