About $().tab() is generally used to switch between tab pages and capsule link content fragments, or to page navigation for related content:
<ul id="myTab"> <li><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> <div id="home">...</div> <div id="profile">...</div> <div id="messages">...</div> <div id="settings">...</div> <script> $(function () { $('#myTab a:last').tab('show');//Initialize which tab to display $('#myTab a').click(function (e) { e.preventDefault();//Block the jump behavior of a link $(this).tab('show');//Show the currently selected link and the associated content }) }) </script>In addition, you can have more flexible ways to activate a specific 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');One thing that needs to be noted in the above code is that the a tag in each li must have a href=#id, which points to the id of the content corresponding to the link. If JavaScript is used to switch navigation content, there is no need to add data-toggle='tab' to the a tag. Of course, if each link a uses this attribute, there is no need to use js to implement it.