Bootstrap系列2

五、選項卡（通過id對應）

<span style="font-family:Microsoft YaHei;font-size:12px;"><div role="tabpanel">
  <!-- 選項卡頭-->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>
<!--選項卡各項內容 -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>
</div></span>

六、彈出框 Model

<span style="font-family:Microsoft YaHei;font-size:12px;"><div class="modal fade" id=“about”>
  <div class="modal-dialog">
    <div class="modal-content">
      <!--彈出框的頭部-->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <!--內容-->
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <!--底部-->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div></span>

最後在鏈接中加上一個彈出框的對象和id：<a href="#" data-toggle="modal" data-target="#about">彈出</a>

七、打開標籤

通過各個選擇器：找到相同id,在對目標執行show的方法

$(‘myTab a[href = “#profile”]‘).tab(‘show’)

$(‘myTab a:first‘).tab(‘show’)

$(‘myTab li:eq(2) a‘).tab(‘show’)