标签页切换

标签页切换，就是通过点击菜单/选项卡中的文字标签，使其达到局部内容更换的效果。以下给出标签页切换的最简化代码实现。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 引入bootstrap-css资源 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-p1KAotb3W9ndluCsqePPYnjRm3c6abdnIjo0tQwYUv83VsbsYd43RuofnFAaDo0E" crossorigin="anonymous"></head><body><!-- 定义菜单/可选择的标签---begin --><ul id="menu" class="nav"><li class=""><!--注意点：    [1]a标签的href属性值必须为对应tab-pane标签的id值；[2]这里必须加上data-taggle="tab"指明要指向的数据；--><a href="#userinfo" data-toggle="tab">个人信息</a></li><li><a href="#query" data-toggle="tab">成果查询</a></li></ul><!-- 定义菜单---end --><!-- 定义内容面板---begin --><!--属性类选择器-tab-contect--><div class="tab-content"><!--注意点：[1]添加类选择器：tab-pane;[2]设置id值,和上面的a标签保持一致--><div class="tab-pane" id="userinfo">个人信息内容</div><div class="tab-pane" id="query">成果查询内容</div></div><!-- 定义内容面板---end --><!-- 引入js资源 --><script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-E5Sj1saJVFNzWWK3YIJB4LEDEEVEGaOdfmCprPDkfWUo+xkb6Ep52Q1TMEtgcFwi" crossorigin="anonymous"></script><script>$(function() {//jquery代码——控制页面初始自动显示id名称为menu的第一个li子标签$('#menu li:eq(0) a').tab('show');});</script></body>
</html>

效果如下，

标签页插件

Bootstrap的标签插件可见参考文档。

第一个官方例子

下面来结合官网的解释看一下上述例子中的js代码中调用的函数的作用。下面是官网给出的第一个例子，

调用tab(“show”)显示tab-pane中的内容

然后给出了调用tab(“show”)函数来显示第n个标签对应的tab-pane中承载的内容。

第一个例子的HTML+CSS代码

而想要显示tab-pane中显示的内容，无需写JS代码，只需要通过添加data-toggle="tab"或者data-toggle="pill"属性值来绑定a标签和tab-pane对应的内容即可。

<div><!-- Nav tabs --><ul class="nav nav-tabs" role="tablist"><li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li><li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li><li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li><li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li></ul><!-- Tab panes --><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="home">...</div><div role="tabpanel" class="tab-pane" id="profile">...</div><div role="tabpanel" class="tab-pane" id="messages">...</div><div role="tabpanel" class="tab-pane" id="settings">...</div></div></div>

fade in效果

fade in效果，简单来说，就是通过添加fade或者tab-pane类选择器，结合上面的data-toggle来达到内容显示效果。同时，也可配合-例如“in active”选择器，来指定初始化时，默认选择要显示的tab-pane中的内容。

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

函数介绍

前提条件：data-target/href数据指向设置

值得一提的是，通常我们也会见到data-target的写法，用于绑定tab选项标签和与之对应的tab-pane内容，其实这种指向方式是可以替换上面的href指向方式的。

tab(“show”)函数-显示内容

只要有一个tab选项标签被预先选中，任何其它未处于选中状态的tab标签及与之关联的内容都会处于隐藏状态。

查看事件响应的新旧对象

当调用tab函数，切换显示的页面内容时，具体的事件响应顺序如下（就不做具体翻译了，有兴趣的可以看一下）。同时，Bootstrap也提供了可以获取新旧事件对象的jquery对象。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {e.target // newly activated tabe.relatedTarget // previous active tab
})

BootStrap之标签页切换相关推荐

php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...
JavaScript 实现标签页切换效果
JavaScript 实现标签页切换效果构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id="tab">& ...
【Axure RP9基础】 Axure标签页切换详解
[Axure RP9基础] 标签页切换在设计原型中,PC和APP端标签页切换是常用的功能,那么在用Axure画原型时我们可以用矩形和动态面板做出标签页切换的效果. 最终效果:点击标签页,显示标签页选 ...
微信小程序中标签页切换效果是怎么做出来的
于传统网页开发中的标签页切换效果不同的是,小程序的标签页切换更接近原生APP的交互体验!也就是可以通过左右滑动页面进行切换,类似于网页开发中的焦点图切换的效果. --这当然是通过微信小程序强大的组件和 ...
Python爬虫之selenium对标签页切换、切换frame标签、cookie处理、执行js代码、开启无界面、以及使用代理ip和替换user-agent等方法
一.selenium对标签页切换.切换frame标签.cookie处理.执行js代码.开启无界面.以及使用代理ip和替换user-agent等方法 (一).selenium标签页的切换当seleni ...
bootstrap --- 标签页切换
很多时候,我们希望写一个简单的标签页.以下使用bootstrap来实现- 首先导入bootstrap的依赖:jquery的依赖.bootstrap的依赖注意: jquery的依赖要在bootstra ...
bootStrap实现tab页切换
bootStrap可以简单方便的实现tab页面的切换用法通过data属性可以无需写任何JavaScript来激活标签式或圆角式的导航, 只需在元素上简单的指定 data-toggle=" ...
ocx控件 postmessage消息会消失_实战经验：如何检测CMFCTabCtrl控件标签页切换事件...
MFC库中经常会使用到的一个控件是Tab标签页控件,这个控件在展现多个平级数据集非常合适. 与控件对应的,是MFC库中的两个类:CMFCTabCtrl和CMFCBaseTabCtrl,其中CMFCTa ...
【033】Bootstrap实现标签页效果
版本 Bootstrap v3.3.6 jQuery v1.11.3 实现方法给显示标签页内容的DIV分别设置上ID: tab_1 和 tab_2.在标签页按钮上的 href 属性设置 #tab_1 ...

BootStrap之标签页切换