bootstrap tab usage resolution

  • 2021-07-10 18:18:53
  • OfStack

Tab Tabs is a very common feature in Web. The user can switch out the corresponding contents by clicking or suspending the corresponding menu items

Tabs in the Bootstrap framework consist mainly of two parts:

Tab component (that is, menu component), corresponding to nav-tabs of Bootstrap)
The bottom switchable tab panel is usually represented by tab-pane in Bootstrap.


<!--  Tab components (menu items nav-tabs ) -->
<ul id="myTab" 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"> Safety </a></li>
 <li><a href="#welfare" role="tab" data-toggle="tab"> Public welfare </a></li>
</ul>

<!--  Tab panel  -->
<div id="myTabContent" class="tab-content">
 <div class="tab-pane active" id="bulletin"> Announcement Content Panel </div>
 <div class="tab-pane" id="rule"> Rules 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>
</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"></script> 

Tabs Structure of tabs

The 1 tab mainly consists of two parts, 1 of which is the menu item and 2 of which is the content panel.
Key 1: The anchor point linked in the tab should match the ID of the corresponding panel content container.

tab-pane are hidden for panel contents, and only the current panel contents are displayed:

css source code:


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

Tab triggers the switching effect

Tab also defines the data property to trigger the switching effect. Of course, you should also load bootstrap. js or tab. js first. The declarative trigger tab needs to meet the following requirements:
1. data-toggle= "tab" should be set in the tab navigation link
2. And set data-target= "selector corresponding to content panel (1 is generally ID)";
If it is a link, you can also use href= "selector corresponding to content panel (1 is generally ID)"
The main function is that the user can find the panel content tab-pane corresponding to the selector when clicking.

3. The panel content set 1 is placed in the tab-content container, and each content panel tab-pane needs to set a separate selector (preferably ID) to match the value of data-target or href in the tab.

Tab to add an fade style to the selection card

In order to make the panel hide and display in the process of switching more smoothly, you can add the class name fade in the panel to make it produce a gradual effect.
When adding fade style, the original default content panel 1 must remember to add the in class name, otherwise its content cannot be seen by users


<!--  Tab components (menu items nav-tabs ) -->
<ul id="myTab" 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"> Safety </a></li>
 <li><a href="#welfare" role="tab" data-toggle="tab"> 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"> Rules 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>
</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 Bootstrap, besides the tab switching function of nav-tabs, it can also have the tab function of capsule nav-pills navigation. We only 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 items nav-pills ) -->
<ul id="myTab" 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"> Safety </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"> Rules 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>
</div>

Tab JavaScript trigger method

The tab ("show") method is called in each link click event to display the corresponding tab panel contents. For the above example, delete the custom data-toggle= "tab" or data-toggle= "pill" attributes in HTML, and then call them through the following script:


$(function(){
 $("#myTab a").click(function(e){
 e.preventDefault();
 $(this).tab("show");
 });
})

 Instances   : 
<!--  Tab components (menu items nav-tabs ) -->
<ul id="myTab2" 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"> Abroad </a></li> 
</ul>
<!--  Tab panel  -->
<div id="myTabContent2" class="tab-content">
 <div class="tab-pane fade in active" id="a"> Entertainment content panel </div>
 <div class="tab-pane fade" id="b"> Real estate content panel </div>
 <div class="tab-pane fade" id="c"> Domestic content panel </div>
 <div class="tab-pane fade" id="d"> Foreign content panel </div> 
</div>

<script> 
 $(function(){
 $("#myTab2 a").click(function(e){
 e.preventDefault();
 $(this).tab("show");
 });
})
</script>

Click below to view

If you want to study in depth, you can click here to study, and then attach three wonderful topics for you:

Bootstrap Learning Tutorial

Bootstrap Practical Course

Bootstrap Table Using Tutorial

Tutorial on using Bootstrap plug-ins


Related articles: