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’)