Bootstrap - 打开标签页

代码：

$('#myTab a[href="#profile"]').tab('show')
$('#myTab a:first').tab('show')
$('#myTab a:last').tab('show')
$('#myTab li:eq(2) a').tab('show')

首先我们要对元素设置点击事件。

添加点击事件的元素:

<ul class="dropdown-menu" role="menu">
              <li><a href="#">Chrome</a></li>
              <li><a href="#">Safari</a></li>
              <li><a href="#">IE</a></li>
              <li><a href="#">Firefox</a></li>
</ul>

标签页我们需要打开的：

<div>
      <!-- Nav tabs -->
      <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>

      <!-- Tab panes -->
      <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>

1.我们给两个父元素设置id,确保好找到。

$(document).ready(function() {

  $("#demo-dropdown a").click(function() {
    var href = $(this).attr("href");
    console.log(href);
    $("#tab-list li a[href= '" + href + "']" ).tab("show");

  });


});