用两种方法实现选项卡切换：纯CSS和jQuery

最新推荐文章于 2021-08-04 00:48:59 发布

小鲤鱼听听

最新推荐文章于 2021-08-04 00:48:59 发布

阅读量778

点赞数 2

分类专栏： CSS JavaScript HTML 文章标签：选项卡切换

本文链接：https://blog.csdn.net/qq_36485978/article/details/88030088

版权

CSS 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML

8 篇文章 1 订阅

订阅专栏

JavaScript

6 篇文章 0 订阅

订阅专栏

第一种用纯CSS实现：

要点: 选项卡内容用块元素div，外层套父元素tabContent，父元素的高度和每一个子元素的高度均相同，同时父元素添加css样式overflow:hidden，目的是让多余的子元素隐藏，由选项卡的a标签的href属性对应的id来寻找元素使其显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选项卡效果-纯CSS实现</title>
		<style>
			.tabHeader {
				display: flex;
			}

			.tabHeader a {
				text-decoration: none;
				background: orange;
				width: 100px;
				height: 30px;
				line-height: 30px;
				text-align: center;
			}
			
			.tabHeader a:hover {
				opacity: 0.6
			}
			/* 这一步很关键，用父元素和子元素高度一致，来覆盖多余的元素，和a标签的定位href属性结合使用 */
			.tabContent {
				height: 152px;
				overflow: hidden;
			}
			/* 这一步很关键 */
			.tabContent div {
				width: 298px;
				height: 150px;
				border: 1px solid green;
				color: #fff;
			}

			.content1 {
				background: #f00;
			}

			.content2 {
				background: #0f0;
			}

			.content3 {
				background: #00f;
			}
		</style>
	</head>
	<body>
		<div class="tabHeader">
			<a class="tab1" href="#myContent1">选项卡1</a>
			<a class="tab2" href="#myContent2">选项卡2</a>
			<a class="tab3" href="#myContent3">选项卡3</a>
		</div>
		<div class="tabContent">
			<div class="content1" id="myContent1">这是内容11111</div>
			<div class="content2" id="myContent2">这是内容22222</div>
			<div class="content3" id="myContent3">这是内容33333</div>
		</div>
	</body>
</html>

第二种用jQuery实现：

要点：除了第一个选项卡内容，其余的选项卡内容都要初始化css样式display:none；选项卡头部添加监听点击事件，在函数中主要分两步：第一步、获取点击元素的href属性，并拆分出#后的id值；第二步、遍历选项卡内容元素，将id值相同的元素设置css样式display:block，id值不同的元素设置css样式display:none;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选项卡效果-jQuery实现</title>
		<style>
			.tabHeader {
				display: flex;
			}

			.tabHeader a {
				text-decoration: none;
				background: orange;
				width: 100px;
				height: 30px;
				line-height: 30px;
				text-align: center;
			}
			
			.tabHeader a:hover {
				opacity: 0.6
			}

			.tabContent {
				height: 152px;
			}

			.tabContent div {
				width: 298px;
				height: 150px;
				border: 1px solid green;
				color: #fff;
			}

			.content1 {
				background: #f00;
			}

			.content2 {
				background: #0f0;
			}

			.content3 {
				background: #00f;
			}
			
			/* 这一步很关键，初始化除了第一个选项卡内容的display值为none，然后点击时再切换其对应元素的display值 */
			.content2,
			.content3 {
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="tabHeader">
			<a class="tab1" href="#myContent1">选项卡1</a>
			<a class="tab2" href="#myContent2">选项卡2</a>
			<a class="tab3" href="#myContent3">选项卡3</a>
		</div>
		<div class="tabContent">
			<div class="content1" id="myContent1">这是内容11111</div>
			<div class="content2" id="myContent2">这是内容22222</div>
			<div class="content3" id="myContent3">这是内容33333</div>
		</div>

		<script src="jquery-3.3.1.js" type="text/javascript"></script>
		<script>
			$(document).ready(function() {
				$(".tabHeader a").on("click", function() {
					//获取要跳转的元素id
					var contentId = $(this).attr("href").split("#")[1];
					//获取选项卡内容,遍历并修改相应选项卡内容的display值
					var contentList = $(".tabContent div");
					for (var i = 0; i < contentList.length; i++) {
						if (contentList[i].id == contentId) {
							contentList[i].style.display = "block";
						} else {
							contentList[i].style.display = "none";
						}
					}
				})
			})
		</script>
	</body>
</html>

小鲤鱼听听

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用两种方法实现选项卡切换：纯CSS和jQuery

第一种用纯CSS实现：要点: 选项卡内容用块元素div，外层套父元素tabContent，父元素的高度和每一个子元素的高度均相同，同时父元素添加css样式overflow:hidden，目的是让多余的子元素隐藏，由选项卡的a标签的href属性对应的id来寻找元素使其显示&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta ...
复制链接

扫一扫

专栏目录