4.3Bootstrap学习js插件篇之标签页

谁借莪１个温暖的怀抱￠ 2022-08-27 03:58 158阅读 0赞

**简单的标签页**

**代码：**

<h1 class="page-header">4.3标签页</h1>
    	<ul class="nav nav-tabs">
    		<li class="active"><a href="#">Home</a></li>
    		<li><a href="#">Profile</a></li>
    		<li><a href="#">Message</a></li>
    	</ul>

预览下：

**![Center][]**

**给上面的先预定义一些href的标签ID,添加一个下拉菜单**

<ul class="nav nav-tabs">
          <li><a href="#home" >Home</a></li>
          <li><a href="#profile" >Profile</a></li>
          <li><a href="#messages" >Messages</a></li>
          <li><a href="#settings" >Settings</a></li>
          <li class="dropdown">
              <a href="#" data-toggle="dropdown" class="dropdown-toggle">Test<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li ><a href="#AAA">@tag</a></li>
                <li ><a href="#BBB">@mag</a></li>
            </ul>
          </li>  
        </ul>

将标签页中的a标签都添加了一个属性data-toggle="tab"

然后在下面添加一个div的容器，并给与tab-content的样式类。

容器里面定义div，然后在div上添加id属性，和上面的href的标签ID对应，并添加tab-pane的样式类，其中一个如下，当然这个里面还添加了一个active的样式类，目的就是默认激活

最终现在每个标签页都可以进行点击，并且下拉菜单的菜单想也是可以点击，对应着我们为tab-content中定义的标签内容页。

可以看出上面的操作我们都是通过data属性就可以实现标签切换和内容展示的。

![Center 1][]

#### 扩展了标签页式导航 ####

此插件为[标签页式导航组件][Link 1]添加了标签页内容区。

## 用法 ##

通过JavaScript启动可切换标签页（每个标签页单独被激活）：

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

去掉所有a标签的data-toggle然后调用js

可以有以下几种方式单独激活标签页：

$('#myTab a[href="#profile"]').tab('show') // Select tab by name $('#myTab a:first').tab('show') // Select first tab $('#myTab a:last').tab('show') // Select last tab $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

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

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

![13151151-852949d570a54d41967312f6d1220f9a.jpg][]

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      e.target //通过此参数可以获得激活的tab信息 
      e.relatedTarget // 激活之前的那一个tab的信息
    }) <script type="text/javascript">
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      //e.target // activated tab
      //e.relatedTarget // previous tab
    	alert("目标："+e.target);
    	alert("相关："+e.relatedTarget);
    	})
    </script>

### 渐入效果 ###

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

[Center]: /images/20220824/d5e011ef90734c6089075bfd3097b1d0.png
[Center 1]: /images/20220824/3db8ba4c8517492db44fede3a39248eb.png
[Link 1]: http://v3.bootcss.com/components/#nav-tabs
[13151151-852949d570a54d41967312f6d1220f9a.jpg]: /images/20220824/d22f47aa3ee14d17ad7b0358d2989351.png