BootStrap之标签页切换_bootstrap标签页切换

作者：花生_TL007 | 2024-02-08 14:20:18

踩

bootstrap标签页切换

标签页切换

标签页切换
标签页插件
函数介绍

标签页切换

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

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

效果如下，

在这里插入图片描述

标签页插件

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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>
1
2
3
4
5
6

函数介绍

前提条件：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 tab
  e.relatedTarget // previous active tab
})
1
2
3
4

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/69427