Tabs (tab) are introduced in the chapter bootstrap navigation elements, and by combining some data properties, you can easily create some tabbed interfaces. With this plugin you can place content on tabs or capsule tabs or even drop-down menu tabs.
Usage
You can use the following two ways to enable a tab page
1, through the Data property: You need to add data-toggle= "tab" or data-toggle= "pill" to the anchor text link. For example:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title></title>
<meta charset= "Utf-8"/>
<meta name= "viewport" content= "width=device-width,initial-scale=1.0"/>
<link rel= "stylesheet" href= "Bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
<body>
<div style= "padding:20px" >
<ul class= "nav nav-tabs" role= "Navigation" >
<li class= "Active" ><a href= "#html5" data-toggle= "tab" >Html5</a></li>
<li><a href= "#css3" data-toggle= "tab" >Css3</a></li>
<li><a href= "#javascript" data-toggle= "tab" >Javascript</a></li>
<li><a href= "#jquery" data-toggle= "tab" >jQuery</a></li>
<li><a href= "#jqueryui" data-toggle= "tab" >jQueryUI</a></li>
<li><a href= "#bootstrap" data-toggle= "tab" >Bootstrap</a></li>
<li><a href= "#cnet" data-toggle= "tab" >C#.Net</a></li>
<li><a href= "#mssql" data-toggle= "tab" >MsSql</a></li>
<li class= "Dropdown" >
<a href= "#" class= "Dropdown-toggle" data-toggle= "dropdown" id= "Mytabdrop" >HTML5 front <span class= "Caret" > </span></a>
<ul class= "Dropdown-menu" role= "menu" aria-labelledby= "Mytabdrop" >
<li><a href= "#html5" data-toggle= "tab" >Html5</a></li>
<li><a href= "#css3" data-toggle= "tab" >Css3</a></li>
<li><a href= "#javascript" data-toggle= "tab" >Javascript</a></li>
<li><a href= "#jquery" data-toggle= "tab" >jQuery</a></li>
<li><a href= "#jqueryui" data-toggle= "tab" >jQueryUI</a></li>
<li><a href= "#bootstrap" data-toggle= "tab" >Bootstrap</a></li>
<li><a href= "#cnet" data-toggle= "tab" >C#.Net</a></li>
<li><a href= "#mssql" data-toggle= "tab" >MsSql</a></li>
</ul>
</li>
</ul>
<div class= "tab-content" id= "Mytabcontent" >
<div class= "Tab-pane fade in Active" id= "HTML5" >
<H2>HTML5 Introduction <p> here can write some of the other code you want to function </p>
</div>
<div class= "Tab-pane fade" id= "CSS3" >
<H2>CSS3 Introduction <p> here can write some of the other code you want to function </p>
</div>
<div class= "Tab-pane fade" id= "JavaScript" >
<p> here can write some of the other code you want to function </p>
</div>
<div class= "Tab-pane fade" id= "jquery" >
<p> here can write some of the other code you want to function </p>
</div>
<div class= "Tab-pane fade" id= "jQueryUI" >
<p> here can write some of the other code you want to function </p>
</div>
<div class= "Tab-pane fade" id= "Bootstrap" >
<p> here can write some of the other code you want to function </p>
</div>
<div class= "Tab-pane fade" id= "CNET" >
<p> here can write some of the other code you want to function </p>
</div>
<div class= "Tab-pane fade" id= "MSSQL" >
<p> here can write some of the other code you want to function </p>
</div>
</div>
</div>
<script src= "Jquery/jquery-2.1.4.js" ></script>
<script src= "Bootstrap-3.3.5-dist/js/bootstrap.min.js" ></script>
</body>
2. Through javascript: You can use JavaScript to enable tabs,. $ (). Tab: This method activates the tab element and the Content container. The tab needs to use a data-target or an hrefthat points to the container node in the DOM. Instance:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title></title>
<meta charset= "Utf-8"/>
<meta name= "viewport" content= "width=device-width,initial-scale=1.0"/>
<link rel= "stylesheet" href= "Bootstrap-3.3.5-dist/css/bootstrap.min.css"/>
<script src= "Jquery/jquery-2.1.4.js" ></script>
<script src= "Bootstrap-3.3.5-dist/js/bootstrap.min.js" ></script>
<body>
<div style= "padding:20px" >
<ul class= "nav nav-tabs" role= "navigation" id= "Mytab" >
<li class= "Active" ><a href= "#html5" >Html5</a></li>
<li><a href= "#css3" >Css3</a></li>
<li><a href= "#javascript" >Javascript</a></li>
<li><a href= "#jquery" >jQuery</a></li>
<li><a href= "#jqueryui" >jQueryUI</a></li>
<li><a href= "#bootstrap" >Bootstrap</a></li>
<li><a href= "#cnet" >C#.Net</a></li>
<li><a href= "#mssql" >MsSql</a></li>
<li class= "Dropdown" >
<a href= "#" class= "Dropdown-toggle" data-toggle= "dropdown" id= "Mytabdrop" >HTML5 front <span class= "Caret" > </span></a>
<ul class= "Dropdown-menu" role= "menu" aria-labelledby= "Mytabdrop" >
<li><a href= "#html5" >Html5</a></li>
<li><a href= "#css3" >Css3</a></li>
<li><a href= "#javascript" >Javascript</a></li>
<li><a href= "#jquery" >jQuery</a></li>
<li><a href= "#jqueryui" >jQueryUI</a></li>
<li><a href= "#bootstrap" >Bootstrap</a></li>
<li><a href= "#cnet" >C#.Net</a></li>
<li><a href= "#mssql" >MsSql</a></li>
</ul>
</li>
</ul>
<div class= "tab-content" id= "Mytabcontent" >
<div class= "Tab-pane fade in Active" id= "HTML5" >
<H2>HTML5 Introduction <p> here can write some of the other code you want to function </p>
</div>
<div class= "Tab-pane fade" id= "CSS3" >
<H2>CSS3 Introduction <p> here can write some of the other code you want to function </p>
</div>
<div class= "Tab-pane fade" id= "JavaScript" >
<p> here can write some of the other code you want to function </p>
</div>
<div class= "Tab-pane fade" id= "jquery" >
<p> here can write some of the other code you want to function </p>
</div>
<div class= "Tab-pane fade" id= "jQueryUI" >
<p> here can write some of the other code you want to function </p>
</div>
<div class= "Tab-pane fade" id= "Bootstrap" >
<p> here can write some of the other code you want to function </p>
</div>
<div class= "Tab-pane fade" id= "CNET" >
<p> here can write some of the other code you want to function </p>
</div>
<div class= "Tab-pane fade" id= "MSSQL" >
<p> here can write some of the other code you want to function </p>
</div>
</div>
</div>
<script>
$ (document). Ready (function () {
$ ("#myTab a"). Click (function (e) {
E.preventdefault ();
$ (this). tab ("Show");
})
})
</script>
</body>
Bootstrap tab (tab) plug-in
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
