tab 标签页实现

最新推荐文章于 2024-07-28 21:30:47 发布

爱游戏爱动漫的肥宅

最新推荐文章于 2024-07-28 21:30:47 发布

阅读量8.1k

点赞数 4

分类专栏：前端文章标签： tab css 标签切换

本文链接：https://blog.csdn.net/Alias_fa/article/details/87457305

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

标签页功能是一个比较常用的功能。虽然很多前端框架、插件都带有若干种标签页的功能实现，我依然觉得掌握其基本实现会更有利于我们对这个功能的理解，我们也可以更容易地根据实际情况进行修改。
以下代码示例是一个比较常见的实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab标签页</title>
<script type="text/javascript" src="static/js/jquery-3.3.1.min.js"></script>
<style type="text/css">
.tab_head{
	border-bottom: 1px solid blue;
	width: 512px;
	margin-left: 40px;
	height: 32px;
}
li{
	float: left;
	list-style: none;
	width: 100px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	font-size: 26px;
	margin-right: 2px;
	color: #fff;
	background-color: #1979CA;
	cursor: pointer;
}
.active{
	background-color: #fff;
	color: black;
	border-top: 3px solid blue;
	border-right: 1px solid blue;
	border-left: 1px solid blue;
}
.init{
	clear: both;
	width: 500px;
	height: 200px;
	display: none;
	border: 1px solid blue;
	border-top: none;
	font-size: 20px;
	margin-left: 40px;
	padding: 5px;
}
.show{
	display: block;
}
</style>
</head>
<body>
	<div class="tab_head">
		<ul>
			<li id="tab1" data-season="1" class="active">春天</li>
			<li id="tab2" data-season="2">夏天</li>
			<li id="tab3" data-season="3">秋天</li>
			<li id="tab4" data-season="4">冬天</li>
		</ul>
	</div>
	<div class="tab_content">
		<div id="content_1" class="init show">春天的雨是柔和的，只见春雨在竹枝、竹叶上跳动着。那雨时而直线滑落，时而随风飘洒，
		留下如烟、如雾、如纱、如丝的倩影，飞溅的雨花仿佛是琴铉上跳动的音符，奏出优美的旋律。</div>
		<div id="content_2" class="init">小鸟不知躲匿到什么地方去了；草木都垂头丧气，像是奄奄等毙；只有那知了，不住地在枝头发出破碎
		的高叫；真是破锣碎鼓在替烈日呐喊助威！</div>
		<div id="content_3" class="init">秋天的风，秋天的叶，秋天的色调，秋天的阳光，构成了一幅绝妙的秋景图。图画中埋藏了许许多多的秘密，
		只要我们善于发现，就可以揭开；图画中蕴藏了许许多多的人生哲理，只要我们积极求索，就可以领悟。
		图画中展现了许许多多多姿的人生，只要我们端正态度，就可以拥有。</div>
		<div id="content_4" class="init">阳光给人们的一种感觉是温暖的，冬日的阳光也不例外，它给人们的第一种感觉是温暖，在寒冷的冬天里，
		早晨太阳升了起来，把金色的光辉洒在大地上，大地妈妈苏醒了，不再那么寒冷。</div>
	</div>
</body>
<script type="text/javascript">
	$(function(){
		$("#tab1,#tab2,#tab3,#tab4").click(function() {
			//获取标签页代号
			var num = $.trim($(this).attr("data-season"));
			//删除兄弟元素的 active 类样式
			$("#tab"+num).siblings().removeClass("active");
			$("#tab"+num).addClass("active");
			$("#content_"+num).siblings().removeClass("show");
			$("#content_"+num).addClass("show");
		});
	})
</script>
</html>

效果图如下：
在这里插入图片描述
当然，内容可以放在 div 中，也可以写 form 表单，写表格等甚至放不同的页面都行，根据实际情况填充内容。
另外写了两种标签页样式，仅供参考：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flowicon</title>
<style type="text/css">
	.icon1{
		height: 0;
		width: 100px;
		float: left;
		border-bottom: 55px solid #1979CA;
		border-left: 30px solid transparent;
		/* border-right: 30px solid transparent; */
		border-top-left-radius: 40px;
		border-top-right-radius: 5px;
		color: #fff;
		text-align: center;
		line-height: 55px;
	}
	.content{
		width: 518px;
		height: 300px;
		border: 1px solid #1979CA;
		border-top: none;
		clear: both;
	}
</style>
</head>
<body>
	<div class="icon1">标签一</div>
	<div class="icon1">标签二</div>
	<div class="icon1">标签三</div>
	<div class="icon1">标签四</div>
	<div class="content"></div>
</body>
</html>

效果如下：
在这里插入图片描述
另一种样式如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flowicon</title>
<style type="text/css">
	.icon2{
		height: 50px;
		width: 100px;
		float: left;
		background-color: #1979CA;
		color: #fff;
		text-align: center;
		line-height: 50px;
	}
	.next{
		float: left;
		width: 0;
		height: 0;
		border-top: 25px solid transparent;  
		border-left: 30px solid #1979CA;  
		border-bottom: 25px solid transparent;
	}
	.pre{
		float: left;
		margin-left: -20px;
	}
	.preup{
		clear: both;
		width: 0;
		height: 0;
		border-bottom: 25px solid transparent;  
		border-right: 30px solid #1979CA;  
	}
	.predown{
		clear: both;
		width: 0;
		height: 0;
		border-top: 25px solid transparent;  
		border-right: 30px solid #1979CA;  
	}
	.content{
		width: 518px;
		height: 300px;
		border: 1px solid #1979CA;
		border-top: none;
		clear: both;
	}
</style>
</head>
<body>
	<div class="icon2">开始</div><div class="next"></div>
	<div class="pre">
	<div class="preup"></div><div class="predown"></div>
	</div>
	<div class="icon2">审核</div><div class="next"></div>
	<div class="pre">
	<div class="preup"></div><div class="predown"></div>
	</div>
	<div class="icon2">复核</div><div class="next"></div>
	<div class="pre">
	<div class="preup"></div><div class="predown"></div>
	</div>
	<div class="icon2">结束</div>
	<div class="content"></div>
</body>
</html>

效果如下：
在这里插入图片描述

爱游戏爱动漫的肥宅

关注

4
点赞
踩
28

收藏

觉得还不错? 一键收藏
1
评论
tab 标签页实现

标签页功能是一个比较常用的功能。虽然很多前端框架、插件都带有若干种标签页的功能实现，我依然觉得掌握其基本实现会更有利于我们对这个功能的理解，我们也可以更容易地根据实际情况进行修改。以下代码示例是一个比较常见的实现：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;t...
复制链接

扫一扫

专栏目录