Bootstrap基础--选项卡_nav-tabs

作者：很楠不爱3 | 2024-02-08 14:18:48

踩

nav-tabs

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>

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
50
51

在这里插入图片描述

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

Bootstrap基础--选项卡_nav-tabs

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

触发切换效果

添加fade样式

胶囊式选项卡（nav-pill）

Js 面向对象 动态添加标签页

Js 面向对象动态添加标签页