Bootstrap JavaScript插件：可切换标签 (tab.js)

最新推荐文章于 2024-03-04 00:09:38 发布

汪末末

最新推荐文章于 2024-03-04 00:09:38 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： # Bootstrap 框架文章标签： bootstrap javascript typescript css html

本文链接：https://blog.csdn.net/WangMinGirl/article/details/108493255

本文介绍了如何使用Bootstrap创建可切换的标签导航，包括HTML结构、data属性的使用以及JavaScript的调用方法。通过"data-toggle"和"data-target"属性实现选项卡功能，并展示了静态效果及动态切换的JavaScript代码。文章还提到了选项卡的淡入淡出效果和相关事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

一个可切换的标签导航包含两部分内容，一个是标签导航，一个是内容面板。每个标签都有一个对应的内容面板，当标签发生切换时，自动切换到相应的内容面板。内容面板如下：

<div class="tab-content">
	<div class="tab-pane active" id="tab1" role="tabpanel">
		<p>第一部分</p>
	</div>
	<div class="tab-pane" id="tab2" role="tabpanel">
		<p>第二部分</p>
	</div>
	<div class="tab-pane" id="tab3" role="tabpanel">
		<p>第三部分</p>
	</div>
</div>

其次，定义标签导航。所有链接的 data-toggle 属性值必须是 “tab”，href 属性值为对应内容面板的 id

<ul class="nav nav-tabs" role="tablist">
	<li class="active" role="presentation">

最低0.47元/天解锁文章

200万优质内容无限畅学