bootStrap the Tab tab switch

About $ () Tab () typically used to implement the switching tabs and capsules linked content segment, or page navigation related content:

Such as:

   <ul class="nav nav-tabs" id="myTab"> 
      <li class="active"><a href="#home">Home</a></li> 
      <li><a href="#profile">Profile</a></li> 
      <li><a href="#messages">Messages</a></li> 
      <li><a href="#settings">Settings</a></li> 
    </ul> 
       
    <div class="tab-content"> 
      <div class="tab-pane active" id="home">...</div> 
      <div class="tab-pane" id="profile">...</div> 
      <div class="tab-pane" id="messages">...</div> 
      <div class="tab-pane" id="settings">...</div> 
    </div> 
       
    <script> 
      $(function () { 
        $('#myTab a:last').tab('show');//初始化显示哪个tab 
      
        $('#myTab a').click(function (e) { 
          e.preventDefault();//阻止a链接的跳转行为 
          $(this).tab('show');//显示当前选中的链接及关联的content 
        }) 
      }) 
    </script>

In addition, you can also have a more flexible way to activate a particular tab:

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

PS: prohibition switch

$('a[href="#xxx]').on('show.bs.tab', function(e) {
  e.preventDefault();
});

Note: Each li in a tag must have a href = # id, id this point is the content of the id corresponding to the link, if
switching this content navigation javascript to achieve, a label no longer need to add data -toggle = 'tab', of course, if each a link are used in this property, and that there is no need to achieve with the js