Simple tab page

Code:

[javascript] view plaincopy

1. 4.3 tag page

2.  
   •  
   • Home
                                                                "#">Message
4. Preview:

Predefine some href tag IDs above and add a drop-down menu

view plaincopy

                                                                                                             ;/a>
1.  
2. Messages
Settings
5. " data-toggle="dropdown" class="dropdown-toggle">Test -menu">  
6.                                          ;a href="#BBB">@mag
7. ;/ul>
10. Add an attribute data-toggle="tab"
11. to each a tag in the tab page and then add the following Add a div container and give it a tab-content style class.
12. Define a div in the container, then add the id attribute to the div, corresponding to the tag ID of the href above, and add the tab-pane style class, one of which is as follows, of course, an active is also added to it The purpose of the style class is to activate
by default. Finally, each tab page can be clicked, and the drop-down menu can also be clicked, corresponding to This is the tag content page we defined in tab-content.
It can be seen that in the above operations, we can achieve label switching and content display through the data attribute.

Extended tab navigation

This plug-in adds a tab content area to the tab navigation component.

<div class="tab-pane active" id="home">

Copy after login

Usage

Launch switchable tabs via JavaScript (each tab is activated individually):

Remove the data-toggle of all a tags and call js

You can activate the tab page individually in the following ways:

只需为页面元素简单的添加data-toggle="tab" 或 data-toggle="pill"就可以无需写任何JavaScript代码也能激活标签页或胶囊式导航。为ul添加.nav和.nav-tabs classe即可为其赋予Bootstrap标签页样式；而添加nav和nav-pills class可以为其赋予胶囊标签页。

可以通过jQuery来执行首次的加载

<script>  $(function () {    $('#myTab a:first').tab('show')  })</script>

Copy after login

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {  e.target //通过此参数可以获得激活的tab信息   e.relatedTarget // 激活之前的那一个tab的信息})

Copy after login

[javascript] view plain copy

渐入效果

为每个.tab-pane添加.fade可以让标签页具有淡入的特效。第一个标签页所对应的的内容区必须也添加.in使初始内容同时具有淡入效果。

<div class="tab-content"> <div class="tab-pane fade in active" id="home">...</div> <div class="tab-pane fade" id="profile">...</div> <div class="tab-pane fade" id="messages">...</div> <div class="tab-pane fade" id="settings">...</div> </div>

Copy after login