Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_self">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache,must-ridate">
<meta http-equiv="expires" content="0">
<title>
tab Page switching
</title>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
<style type="text/css">
</style>
</head>
<body>
<p style="display:none;">
1.Reference website: http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html 2..fade increase fade in and fade out effect; add
.fade To each .tab-pane behind; 3.First tab must be added .in Class to fade in the initial content;
</p>
<!-- tab Label -->
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">
Microsoft
</a>
</li>
<li>
<a href="#ios" data-toggle="tab">
NET CORE
</a>
</li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">
C#
<b class="caret">
</b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li>
<a href="#jmeter" tabindex="-1" data-toggle="tab">
EF
</a>
</li>
<li>
<a href="#ejb" tabindex="-1" data-toggle="tab">
Docker
</a>
</li>
</ul>
</li>
</ul>
<!-- each tab Page content -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>
Microsoft, an American multinational technology company, is also the world PC(Personal Computer，Personal computer) software development, led by bill·Gates and Paul·Allen was founded in 1975, with its headquarters in Redmond, Washington( Redmond，Near Seattle). Mainly engaged in R & D, manufacturing, licensing and providing a wide range of computer software services.
</p>
</div>
<div class="tab-pane fade" id="ios">
<p>
NET CORE Is a cross platform framework developed and released by Microsoft.
</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>
EF It's an open source ORM Frame.
</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>
Docker It is a container architecture that creates high scalability and strength.
</p>
</div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js">
</script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js">
</script>
<script type="text/javascript">
</script>
</body>
</html>There are several knowledge points:
1)
$('#clglTab a[href="#ysplb"]').on('shown.bs.tab', function(e){
do somehting...
});For getting elements based on the connected href, the following are similar:
$('a[data-toggle="tab"]')
$('#myTab a[href="#profile"]').tab('show')
$('#myTab a:first').tab('show')
$('#myTab a:last').tab('show')
$('#myTab li:eq(2) a').tab('show')2) Two events:
$("xxx").on("shown.bs.tab", function(e){})//Is the event triggered when the tab page is displayed;show.bs.tab:
This event is triggered when a tab is displayed, but it must be before a new tab is displayed. Use event.target and event.relatedTarget to locate the active tab and the previous active tab, respectively.
shown.bs.tab:
This event is triggered when a tab is displayed, but must occur after a tab has been displayed. Use event.target and event.relatedTarget to locate the active tab and the previous active tab, respectively.
Such as:
$(function(){
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// Get the name of the active tab
var activeTab = $(e.target).text();
// Gets the name of the previous active tab
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
});3) Enable tabs with javascript:
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})The results are as follows:
