BootStrap tab TAB use summary _javascript tips

tab

The basic use of tabs is:

<ul class= "Nav nav-tabs" >
 <li class= "Active" ><a "#" href= "#tab1" data-target= "tab" >tab1</a></li>
 <li><a href= "#" data-target= "#tab2" data-toggle= "tab" >tab2</a ></li>
 <li><a href= "#" data-target= "#tab3" data-toggle= "tab" >tab3</a></li>
</ul>
<div class= "tab-content" >
 <div class= "Tab-pane active" id= "Tab1" >11111</ div>
 <div class= "Tab-pane" id= "tab2" >22222</div>
 <div class= "Tab-pane" id= "Tab3" > 33333</div>
</div>

Tabs use separate labels and specific content, which can be put together but must exist at the same time.

The Key property of tab label is Data-target= "Ele", data-toggle= "tab", data-target= "Ele" indicates the specific content of the label, data-toggle= "tab" provides HTML trigger condition, These two properties can complete the TAB function, but if you do not use these two properties directly from the nested structure above, the highlight style is missing and needs to be implemented by ourselves.

Specific content in order to avoid unnecessary problems we have to follow the structure of the above to write, Tab-pane as the tab-content elements can be hidden, class= "Tab-pane" elements and the data-target of the label corresponding to each other, If Data-target is set to data-target= "#demo" To set id= "demo" on the content element, active represents the highlight style and identifies the currently displayed label.

If you want the animation to add fade after Tab-pane

The label's highlight class style is to be set on the LI element

JS use

tab when using JS to make calls directly on the LABEL element binding event can be, the tab only provides a realistic parameter "show", you can select a tab through JS, must be in the label element bound event.

Used in the following ways:

$ ("Ele"). Tab ("Show")

The tab provides two events, and the event is also bound to the LABEL element:

1.show.bs.tab is triggered before the tab is displayed

2.shown.bs.tab is triggered after tab display

If you do not set animations on class= "Tab-pane", two events are really no different, if you set an animation Show.bs.tab before the tab display, Shown.bs.tab triggers after the animation completes.

Two properties are provided in the event object for both events, E.target and E.relatedtarget, respectively, for the currently clicked tab and the previous tab.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.