Bootstrap 实例 - 标签页（Tab）插件

最新推荐文章于 2023-07-24 22:12:02 发布

clx1013

最新推荐文章于 2023-07-24 22:12:02 发布

阅读量273

点赞数

分类专栏： html 文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_43930435/article/details/102686283

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Bootstrap 实例 - 标签页（Tab）插件</title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	</head>

	<body>

		<ul id="myTab" class="nav nav-tabs">
			<li class="active">
				<a href="#culture" data-toggle="tab">
					企业文化
				</a>
			</li>

			<li>
				<a href="#hornor" data-toggle="tab">资质荣誉</a>
			</li>
			<li>
				<a href="#organize" data-toggle="tab">组织机构</a>
			</li>
			<li>
				<a href="#propaganda" data-toggle = "tab">宣传视频</a>
			</li>

		</ul>
		<div id="myTabContent" class="tab-content">
			<div class="tab-pane fade in active" id="culture">
				<p>1</p>
			</div>
			<div class="tab-pane fade" id="hornor">
				<p>2</p>
			</div>
			<div class="tab-pane fade" id="organize">
				<p>3</p>
			</div>
			<div class="tab-pane fade" id="propaganda">
				<p>4</p>
			</div>
		</div>

	</body>

</html>

效果

在这里插入图片描述

clx1013

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 实例 - 标签页（Tab）插件

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 标签页（Tab）插件</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twi...
复制链接

扫一扫

专栏目录