Bootstrap tab usage method resolution, bootstrap Tab

Bootstrap tab usage method resolution, bootstrap Tab

Tab Tabs is a very common Web function. Click or hover the corresponding menu item to switch the corresponding content

The tabs in the Bootstrap framework consist of two parts:

Tab Components(That is, the menu component), corresponding to the nav-tabs of Bootstrap)
Bottom SwitchTab panelIn Bootstrap, it is usually represented by tab-pane.

<! -- Tab component (menu item nav-tabs) --> <ul id = "myTab" class = "nav-tabs" role = "tablist"> <li class = "active"> <a href = "# bulletin" role = "tab" data-toggle = "tab"> announcement </a> </li> <a href = "# rule" role = "tab" data-toggle = "tab"> rules </a> </li> <a href = "# forum" role = "tab" data-toggle = "tab"> forum </a> </li> <a href = "# security" role = "tab" data-toggle = "tab"> security </a> </li> <li> <a href = "# welfare" role = "tab" data-toggle = "tab"> Public welfare </> </Li> </ul> <! -- Tab panel --> <div id = "myTabContent" class = "tab-content"> <div class = "tab-pane active" id = "bulletin"> announcement panel </div> <div class = "tab-pane" id = "rule"> rule content panel </div> <div class = "tab-pane" id = "forum"> forum content panel </div> <div class = "tab-pane" id = "security"> security content panel </div> <div class = "tab-pane" id = "welfare"> Public welfare content panel </div> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"> </script> <script src = "// maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">>

Tab-tab Structure

A tab consists of menu items and content panel.
Key: The Anchor linked to the tab must match the container ID of the corresponding panel content.

For the panel content tab-pane is hidden, only the current Panel content is displayed:

Css source code:

.tab-content > .tab-pane { display: none;}.tab-content > .active { display: block;}

Tab-trigger switch Effect

Tab also defines the data attribute to trigger the switching effect. Of course, you must load bootstrap. js or tab. js first. The declarative trigger tab must meet the following requirements:
1. Set data-toggle = "tab" in the tab navigation link"
2. Set data-target = "corresponding content panel selector (generally ID )";
If it is a link, you can also use href = "corresponding content panel selection character (generally ID )"
The main function is to find the panel content tab-pane corresponding to the selector when you click it.

3. The panel content is uniformly placed in the tab-content container, and an independent selector (preferably ID) needs to be set for each content panel tab-pane) match the value of data-target or href In the tab.

Tab-Add a fade style for the selected card

In order to make the Panel hide and display more smoothly during the switching process, you can add the class name fade in the Panel so that it will produce a progressive effect.
When adding a fade style, remember to add the in class name to the content panel displayed by default. Otherwise, the content cannot be viewed by users.

<! -- Tab component (menu item nav-tabs) --> <ul id = "myTab" class = "nav-tabs" role = "tablist"> <li class = "active"> <a href = "# bulletin" role = "tab" data-toggle = "tab"> announcement </a> </li> <a href = "# rule" role = "tab" data-toggle = "tab"> rules </a> </li> <a href = "# forum" role = "tab" data-toggle = "tab"> forum </a> </li> <a href = "# security" role = "tab" data-toggle = "tab"> security </a> </li> <li> <a href = "# welfare" role = "tab" data-toggle = "tab"> Public welfare </> </Li> </ul> <! -- Tab panel --> <div id = "myTabContent" class = "tab-content"> <div class = "tab-pane fade in active" id = "bulletin"> announcement content panel </div> <div class = "tab-pane fade" id = "rule"> rule content panel </div> <div class = "tab-pane fade" id = "forum"> forum content panel </div> <div class = "tab-pane fade" id = "security"> security content panel </div> <div class = "tab -pane fade "id =" welfare "> Public welfare content panel </div> <script src =" http://libs.baidu.com/jquery/1.9.0/jquery.js "> </script> <script src =" http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>

Tab-capsule tab (nav-pills)

In addition to enabling the switch feature of tabs for nav-tabs, Bootstrap also provides tabs for the capsule-style nav-pills navigation. We only need to replace nav-tabs with nav-pills. Another key point is to replace data-toggle = "tab" with data-toggle = "pill ".

<! -- Tab component (menu item nav-pills) --> <ul id = "myTab" class = "nav-pills" role = "tablist"> <li class = "active"> <a href = "# bulletin" role = "tab" data-toggle = "pill"> announcement </a> </li> <a href = "# rule" role = "tab" data-toggle = "pill"> rules </a> </li> <a href = "# forum" role = "tab" data-toggle = "pill"> forum </a> </li> <a href = "# security" role = "tab" data-toggle = "pill"> security </a> </li> <li> <a href = "# welfare" role = "tab" data-toggle = "pill "> Public Welfare </a> </li> </ul> <! -- Tab panel --> <div id = "myTabContent" class = "tab-content"> <div class = "tab-pane fade in active" id = "bulletin"> announcement content panel </div> <div class = "tab-pane fade" id = "rule"> rule content panel </div> <div class = "tab-pane fade" id = "forum"> forum content panel </div> <div class = "tab-pane fade" id = "security"> security content panel </div> <div class = "tab -pane fade "id =" welfare "> Public welfare content panel </div>

Tab-JavaScript trigger Method

Call the "show" method in the click event of each link to display the corresponding label panel content. For the preceding example, delete the Custom data-toggle = "tab" or data-toggle = "pill" attribute in HTML, and then use the following script to call the attribute:

$ (Function () {$ ("# myTab "). click (function (e) {e. preventDefault (); $ (this ). tab ("show") ;}) instance: <! -- Tab component (menu item nav-tabs) --> <ul id = "myTab2" class = "nav-tabs" role = "tablist"> <li> <a href = "# a" role = "tab"> entertainment </a> </li> <a href = "# B" role = "tab"> real estate </a> </li> 
Click to view
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.