Tab (Tab) By combining some data properties, you can easily create a tab interface.
"If you want to reference the functionality of the plugin separately, you need to reference tab.js. Or, as mentioned in the Bootstrap Plugin Overview chapter, you can reference bootstrap.js or compressed versions of bootstrap.min.js."
1. Usage
You can enable tab pages in two ways:
By data property: You need to add data-toggle="tab" or data-toggle="pill" to the anchor text link.
Adding nav and nav-tabs classes to ul will apply the Bootstrap tag style, adding nav and nav-pills classes to ul will apply the Bootstrap capsule style.
<ul> <li><a href="#identifier" data-toggle="tab">Home</a></li>...</ul>
Through JavaScript: You can use Javascript to enable tabs as follows:
$('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show')})The following example demonstrates the activation of individual tabs in different ways:
// Select the tab page $('#myTab a[href="#profile"]').tab('show') // Select the first tab page $('#myTab a:first').tab('show') // Select the last tab page $('#myTab a:last').tab('show') // Select the third tab page (indexed from 0) $('#myTab li:eq(2) a').tab('show')2. Fade effect
If you need to set a fade effect for the tab, add .fade to each .tab-pane. The first tab must be added with a .in class to fade in to display the initial content, as shown in the following example:
<div> <div id="home">...</div> <div id="svn">...</div> <div id="ios">...</div> <div id="java">...</div></div>
3. Method
.$().tab: This method activates tab elements and content containers. The tab page needs to use a data-target or a href pointing to the container node in the DOM.
<ul id="myTab"> <li><a href="#identifier" data-toggle="tab">Home</a></li> .....</ul><div> <div id="home">...</div> ....</div><script> $(function () { $('#myTab a:last').tab('show') })</script>IV. Events
The following table lists the events to be used in the Tab (Tab) plugin. These events can be used as hooks in functions.
5. Basic examples
1. Tags
Tab pages are commonly known as tab functions.
//Basic Usage <ul> <li> <a href="#html5" data-toggle="tab">HTML5</a> </li> <li> <a href="#bootstrap" data-toggle="tab">Bootstrap</a> </li> <li> <a href="#jquery" data-toggle="tab">jQuery</a> </li> <li> <a href="#extjs" data-toggle="tab">ExtJS</a> </li></ul><div style="padding: 10px;"> <div id="html5"> ... </div> <div id="bootstrap"> ... </div> <div id="jquery"> ... </div> <div id="extjs"> ... </div></div>
//The fade effect can be set, and in indicates that the preferred content is displayed by default <div id="html5">//It can also be replaced with capsule <ul>//data-target
The binding or not binding effect is the same with data-target
//Use JavaScript and directly use the tab method. $('#nav a').on('click', function(e) { e.preventDefault(); $(this).tab('show');}); //Events, other similarities $('#nav a').on('show.bs.tab', function() { alert('Free when calling tab!');}); $('#nav a').on('shown.bs.tab', function() { alert('Free when displaying tab!');});This series of tutorials has been compiled into: Bootstrap Basic Tutorials Special Topics, welcome to click to learn.
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap Table usage tutorial
Bootstrap plug-in usage tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.