Bootstrap基础--选项卡

最新推荐文章于 2025-03-26 19:24:21 发布

qq_39913441

最新推荐文章于 2025-03-26 19:24:21 发布

阅读量1.9w

点赞数 6

分类专栏： html 选项卡 nav-tabs Bootstrap

本文链接：https://blog.csdn.net/qq_39913441/article/details/98512263

版权

html 同时被 3 个专栏收录

11 篇文章

订阅专栏

Bootstrap

5 篇文章

订阅专栏

选项卡

1 篇文章

订阅专栏

本文详细介绍如何使用Bootstrap创建选项卡功能，包括基本结构、触发切换效果的方法及如何添加渐入动画。同时，展示了如何通过JavaScript进一步控制选项卡的切换。

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

Bootstrap基础–选项卡(nav-tabs)

选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项，能切换出对应的内容。

一个选项卡主要包括两个部分，其一是菜单项，其二是内容面板。

注意：选项卡中链接的锚点要与对应的面板内容容器的?相匹配。

触发切换效果

选项卡导航链接中要设置data-toggle=“tab”;
并且设置data-target=“对应内容面板的选择符(一般是?)”；
如果是链接的话，还可以通过href=“对应内容面板的选择符(一般是?)”。主要起的作用是用户点击的时候能找到该选择符所对应的面板内容tab-pane。
面板内容统一放在ta-content容器中，而且每个内容面板tab-pane都需要设置一个独立的选择符（最好是ID）与选项卡中的data-target 或 href 的值匹配。

添加fade样式

在面板中添加类名fade，可让其产生渐入的效果。在添加fade样式时，最初的默认显示的内容面板一定要记得加上in类名，不然其内容用户无法看到。

胶囊式选项卡（nav-pill）

将nav-tabs换成nav-pills.
将data-toggle="tab"换成data-toggle=“pill”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="JSmin/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="JSmin/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="CSS/bootstrap.min.css" />
	</head>
	<body>
		<h1>选项卡</h1>
		<ul class="nav nav-tabs">
			<li class="active"><a href="#bulletin" data-toggle="tab">公告</a></li>
			<li><a href="#rule" data-toggle="tab">规则</a></li>
			<li><a href="#forum" data-toggle="tab">论坛</a></li>
			<li><a href="#security" data-toggle="tab">安全</a></li>
			<li><a href="#welfare" data-toggle="tab">公益</a></li>
		</ul>
		<div id="mytab-content" class="tab-content">
			<div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
			<div class="tab-pane fade" id="rule">规则内容面板</div>
			<div class="tab-pane fade" id="forum">论坛内容面板</div>
			<div class="tab-pane fade" id="security">安全内容面板</div>
			<div class="tab-pane fade" id="welfare">公益内容面板</div>
		</div>

		<h3>js触发选项卡</h3>
		<ul class="nav nav-tabs" id="myTab">
			<li class="active"><a href="#bulletin1">公告</a></li>
			<li><a href="#rule1">规则</a></li>
			<li><a href="#forum1">论坛</a></li>
			<li><a href="#security1">安全</a></li>
			<li><a href="#welfare1">公益</a></li>
		</ul>
		<div id="mytab-content2" class="tab-content">
			<div class="tab-pane fade in active" id="bulletin1">公告内容面板</div>
			<div class="tab-pane fade" id="rule1">规则内容面板</div>
			<div class="tab-pane fade" id="forum1">论坛内容面板</div>
			<div class="tab-pane fade" id="security1">安全内容面板</div>
			<div class="tab-pane fade" id="welfare1">公益内容面板</div>
		</div>
		<script type="text/javascript">
			$(function(){
				$('#myTab a').click(function(){
					$(this).tab('show')
				})
			})
		</script>		
	</body>
</html>

在这里插入图片描述