Bootstrap learning js plug-in tab page_html/css_WEB-ITnose

Simple tab page

Code:

[javascript] view plaincopy

1. 66aadab6ca5015e8305e9566419593304.3 tag page473f0a7621bec819994bb5020d29372a
2.   d298440dd905fd5f04aa68386d2e1df5
3.   ef5dc968b76d5ea7ce8b8602c8c59a96ee7959cc8dd4be16ef633321c03dac32Home5db79b134e9f6b82c0b36e0489ee08ed bed06894275b65c1ab86501b08a632eb                                                              "#">Message5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
4. 929d1f5ca49e04fdcb27f9465b944689
6. Preview:

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

[javascript]

view plaincopy

d298440dd905fd5f04aa68386d2e1df5                                                                                                              ;/a>bed06894275b65c1ab86501b08a632eb

1.   25edfb22a4f469ecb59f1190150159c667ea85e6b54cd03d4464709c0f8a14eeMessages5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 7091a0a3c16c16e0d003cd083c61c1ecSettings5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
2. c0681fc17243770ad36d44adcd4d376c
3. " data-toggle="dropdown" class="dropdown-toggle">Test198b0b30fcc77dc019a894563164d6a10d36329ec37a2cc24d42c7229b69747a5db79b134e9f6b82c0b36e0489ee08ed -menu">  
4.                                          ;a href="#BBB">@mag5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
5. ;/ul>
8. Add an attribute data-toggle="tab"
9. 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.
10. 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">

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>

 

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

[javascript] view plain copy

1. 8019067d09615e43c7904885b5246f0a  
2. $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {  
3.   //e.target // activated tab  
4.   //e.relatedTarget // previous tab  
5.     alert("目标："+e.target);  
6.     alert("相关："+e.relatedTarget);  
7.     })  
8. 2cacc6d41bbb37262a98f745aa00fbf0  

 

 

 

渐入效果

 

为每个.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>