Tabs are a very common feature in the web. Users can click or suspend the corresponding menu item to switch out the corresponding content
The tabs in the Bootstrap framework mainly consist of two parts:
Tab Components(that is, menu component), corresponding to Bootstrap's nav-tabs)
The bottom can be switchedTab Panel, usually represented by tab-pane in Bootstrap.
<!-- Tab Components（Menu Itemsnav-tabs）--> <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">Announcement</a></li> <li><a href="#rule" role="tab" data-toggle="tab">Rules</a></li> <li><a href="#forum" role="tab" data-toggle="tab">Forum</a></li> <li><a href="#security" role="tab" data-toggle="tab">Security</a></li> <li><a href="#welfare" role="tab" data-toggle="tab">charity</a></li></ul> <!-- Tab Panel --> <div class="tab-content"> <div class="tab-pane active" >Announcement Content Panel</div> <div class="tab-pane" >Rules Content Panel</div> <div class="tab-pane" >Forum Content Panel</div> <div class="tab-pane" >Security Content Panel</div> <div class="tab-pane" >Charity Content Panel</div> </div> <script src="/jquery/1.9.0/"></script> <script src="///bootstrap/3.2.0/js/"></script>
Tab – The structure of the tab
A tab mainly includes two parts, one is the menu item and the other is the content panel.
The key point is that the anchor points linked in the tabs must match the ID of the corresponding panel content container.
The panel content tab-pane is hidden, and only the current panel content is displayed:
css source code:
.tab-content > .tab-pane {
display: none;
}
.tab-content > .active {
display: block;
}
Tab – Trigger the toggle effect
The tab also defines the data attribute to trigger the toggle effect. Of course, you have to load or yes first. The declarative trigger tab needs to meet the following requirements:
1. You need to set data-toggle="tab" in the tab navigation link
2. And set data-target=”Selector (usually ID) for the content panel”;
If it is a link, you can also use href="corresponding to the content panel (usually ID)"
The main function is that when the user clicks, he can find the panel content corresponding to the selector tab-pane.
3. The panel content is placed in the tab-content container, and each content panel tab-pane needs to set an independent selector (preferably ID) to match the value of data-target or href in the tab.
Tab – Add fade style to the selection card
In order to make the panel hiding and displaying more smoothly during the switching process, you can add the class name fade to the panel to produce a gradual effect.
When adding fade style, remember to add the in class name of the content panel that is displayed by default, otherwise the content user will not be able to see it.
<!-- Tab Components（Menu Itemsnav-tabs）--> <ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">Announcement</a></li> <li><a href="#rule" role="tab" data-toggle="tab">Rules</a></li> <li><a href="#forum" role="tab" data-toggle="tab">Forum</a></li> <li><a href="#security" role="tab" data-toggle="tab">Security</a></li> <li><a href="#welfare" role="tab" data-toggle="tab">charity</a></li></ul> <!-- Tab Panel --> <div class="tab-content"> <div class="tab-pane fade in active" >Announcement Content Panel</div> <div class="tab-pane fade" >Rules Content Panel</div> <div class="tab-pane fade" >Forum Content Panel</div> <div class="tab-pane fade" >Security Content Panel</div> <div class="tab-pane fade" >Charity Content Panel</div> </div> <script src="/jquery/1.9.0/"></script> <script src="/bootstrap/3.2.0/js/"></script>
Tabs – Capsule tabs (nav-pills)
In addition to allowing nav-tabs to have tab switching function, it also has tab functionality for capsule nav-pills navigation. We just need to replace nav-tabs with nav-pills, and the other key point is to replace data-toggle="tab" with data-toggle="pill".
<!-- Tab Components（Menu Itemsnav-pills）--> <ul class="nav nav-pills" role="tablist"> <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">Announcement</a></li> <li><a href="#rule" role="tab" data-toggle="pill">Rules</a></li> <li><a href="#forum" role="tab" data-toggle="pill">Forum</a></li> <li><a href="#security" role="tab" data-toggle="pill">Security</a></li> <li><a href="#welfare" role="tab" data-toggle="pill">charity</a></li></ul> <!-- Tab Panel --> <div class="tab-content"> <div class="tab-pane fade in active" >Announcement Content Panel</div> <div class="tab-pane fade" >Rules Content Panel</div> <div class="tab-pane fade" >Forum Content Panel</div> <div class="tab-pane fade" >Security Content Panel</div> <div class="tab-pane fade" >Charity Content Panel</div> </div>
Tab – JavaScript trigger method
Call the tab("show") method in the click event of each link to display the corresponding tag panel content. For the example above, delete the custom data-toggle="tab" or data-toggle="pill" attribute in HTML, and then call it through the following script:
$(function(){
$("#myTab a").click(function(e){
();
$(this).tab("show");
});
})
Example ：
<!-- Tab Components（Menu Itemsnav-tabs）-->
<ul class="nav nav-tabs" role="tablist">
<li><a href="#a" role="tab">Entertainment</a></li> <li><a href="#b" role="tab">Real Estate</a></li> <li><a href="#c" role="tab">Domestic</a></li> <li><a href="#d" role="tab">Foreign</a></li></ul>
<!-- Tab Panel -->
<div class="tab-content">
<div class="tab-pane fade in active" >Entertainment content panel</div>
<div class="tab-pane fade" >Real Estate Content Panel</div>
<div class="tab-pane fade" >Domestic content panel</div>
<div class="tab-pane fade" >Foreign content panel</div>
</div>
<script>
$(function(){
$("#myTab2 a").click(function(e){
();
$(this).tab("show");
});
})
</script>
NextClickCheck
If you want to learn more, you can clickhereLet’s 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 study and I hope everyone will support me more.