BootStrap之标签页切换

最新推荐文章于 2024-08-24 18:01:28 发布
最新推荐文章于 2024-08-24 18:01:28 发布
阅读量5.5k 收藏 13
点赞数 2
分类专栏： Vue 文章标签： bootstrap jquery 标签页切换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43524214/article/details/122931788
版权

标签页切换

标签页切换

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

<!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 tab
  e.relatedTarget // previous active tab
})
是席木木啊
关注
专栏目录
bootstrap编辑的tab标签切换
12-25
bootstrap编辑的tab标签切换 可用 简单 供参考
基于Bootstrap实现tab标签切换效果
09-02
主要为大家详细介绍了基于Bootstrap实现tab标签切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootStrap实现tab页切换
热门推荐
Room
09-28 7万+
bootStrap可以简单方便的实现tab页面的切换 用法 通过data属性 可以无需写任何JavaScript来激活标签式或圆角式的导航, 只需在元素上简单的指定 data-toggle=”tab” 或 data-toggle=”pill”. 在标签 ul 添加 nav 和 nav-tabs 属性, 将应用Bootstrap标签样式. <ul class="nav nav-tabs">
Bootstrap 标签页（Tab）插件
最新发布
lwx666sl的博客
08-24 756
标签页（Tab）在一章中介绍过。通过结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。
bootstrap --- > 标签页切换
栗子好好吃的博客
04-09 1万+
很多时候,我们希望写一个简单的标签页.以下使用bootstrap来实现… 首先导入bootstrap的依赖:jquery的依赖、bootstrap的依赖 注意: jquery的依赖要在bootstrap依赖的前面导入,原因是:bootstrap的某些功能是在jquery的基础上实现的 在 https://www.bootcdn.cn/jquery/ 导入jquery的CDN <script ...
Bootstrap切换tab事件
我的博客
05-27 1470
如果没有标签页已经激活，那么隐藏。初始化时不会执行上面的事件。
bootstrap的tab切换的效果更改
qq_51615662的博客
01-26 737
bootstrap的tab标签有自带的样式，有些它自定义的class的一些属性比较的多，当我们用自定义样式去覆盖时往往会产生一些问题。要覆盖掉原有的样式，首先要确保优先级高于它自带的属性，然后自定义js要放在导入所有js最后执行。
Bootstrap实现的标签页内容切换显示效果示例
08-30
在该示例中，我们使用 Bootstrap 的 Tab 插件来实现标签页内容切换显示效果。首先，我们需要引入 Bootstrap 的 CSS 和 JavaScript 文件，然后在 HTML 中添加标签页的结构代码。在标签页结构代码中，我们使用了 `nav-...
基于Bootstrap5的Tab标签页的小组件，能让HTML5表单验证的提示信息在Bootstrap5的Tab标签页能正常显示
02-14
在这个基于Bootstrap5的Tab标签页小组件中，我们专注于如何让HTML5表单验证的提示信息在Tab标签页内正确地显示，这对于提升用户体验至关重要。 HTML5是现代网页开发的标准，它引入了许多新的元素和功能，其中就包括...
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
10-18
总结来说，解决Bootstrap Tab标签页切换时图表显示问题的关键在于监听Tab切换事件，并在事件回调中利用图表库提供的方法（如Highcharts的`reflow`）来调整图表尺寸。通过这种方式，可以确保无论何时切换Tab，图表都...
bootstrap实现tab选项卡切换
10-14
主要为大家详细介绍了bootstrap实现tab选项卡切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap实现页面切换
08-22
bootstrap实现页面切换　好代码，齐分享！
基于bootstrap，切换页面主题风格
04-14
基于bootstrap，切换页面主题风格,方法很简单使用，也便于掌握
Bootstrap——设置Tab标签切换
aiyizou6070的博客
08-06 924
最近一个小项目需要用Tab标签切换显示不同div内容，用到了Bootstrap里面的东西，但是在Bootstrap3教程里却没有找到对应的代码，这里记录一下，方便以后快速查阅学习。 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
bootStrap中Tab页签切换
liubingger的博客
07-04 5789
关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换，或是相关内容的页面导航：&lt;ul class="nav nav-tabs" id="myTab"&gt;       &lt;li class="active"&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;       &am
python测试开发django-153.bootstrap导航-标签页切换(nav-tabs)
qq_27371025的博客
10-13 2248
前言 Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。标签页.nav-tabs 类依赖 .nav 基类。 tab标签页 在标签 ul 添加 nav 和 nav-tabs 属性,将应用Bootstrap标签样式。 在li 里面 a 标签上简单的指定 data-toggle=“tab” 或 data-toggle=“pill”，就可以完成一个标签导航页 <ul id="tabs" class="nav nav-tabs"> <li><a h
用Bootstrap实现Tab标签页切换显示
06-09
使用 Bootstrap 实现 Tab 标签页切换显示非常简单，只需要使用 Bootstrap 的 Tab 插件和一些基本的 HTML 和 CSS 代码即可。以下是一个基本的示例： HTML 代码： ``` <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li> <li><a href="#tab2" data-toggle="tab">Tab 2</a></li> <li><a href="#tab3" data-toggle="tab">Tab 3</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <p>这是 Tab 1 中的内容。</p> </div> <div class="tab-pane" id="tab2"> <p>这是 Tab 2 中的内容。</p> </div> <div class="tab-pane" id="tab3"> <p>这是 Tab 3 中的内容。</p> </div> </div> ``` 在这个示例中，我们使用了 Bootstrap 的 nav 和 tab 样式来创建了一个 Tab 标签页。每个 Tab 都是一个链接，点击链接可以切换到对应的标签页。我们使用了 data-toggle 属性来告诉 Bootstrap 使用 Tab 插件来处理这些链接。每个标签页都是一个 div 元素，使用了 tab-pane 样式。其中，第一个标签页使用了 active 样式来标记为默认显示的标签页。 CSS 代码： ``` .nav-tabs { margin-bottom: 15px; } .tab-content { padding: 15px; border: 1px solid #ddd; border-top: none; } ``` 在这个示例中，我们使用了一些基本的 CSS 样式来调整 Tab 标签页的外观。我们设置了一个 margin-bottom 样式来增加 Tab 标签页和其他元素之间的间距，以及一个 padding 和 border 样式来设置标签页的边框和内边距。 JavaScript 代码： ``` $(function() { $('.nav-tabs a').click(function() { $(this).tab('show'); }); }); ``` 在这个示例中，我们使用了 jQuery 库来管理 Tab 插件。当用户点击 Tab 标签页中的链接时，我们使用 tab('show') 方法来显示对应的标签页。 总之，使用 Bootstrap 实现 Tab 标签页切换显示非常简单，只需要使用一些基本的 HTML、CSS 和 JavaScript 代码即可。通过使用 Tab 插件，我们可以轻松创建漂亮且易于使用的 Tab 标签页，为用户提供更好的体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是席木木啊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值