jq实现多标签页切换（二）

最新推荐文章于 2024-03-09 15:45:51 发布

天刚萌萌亮

最新推荐文章于 2024-03-09 15:45:51 发布

阅读量496

点赞数

本文链接：https://blog.youkuaiyun.com/wmeng13/article/details/84349532

版权

本文详细介绍了如何利用jQuery库创建一个功能完善的多标签页切换效果，通过动态添加和删除标签，以及平滑的过渡动画，为用户提供更友好的交互体验。步骤包括设置HTML结构、CSS样式和JavaScript逻辑，确保在不同设备上都能流畅运行。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多页标签切换</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.wrap{
			margin:50px 200px;
		}
		.top{
			text-align: center;
			width: 300px;
		}
		.taba{
			text-align: center;
			width: 100px;
			height: 35px;
			line-height:35px;
			float: left;
			cursor: pointer;
		}
		.tab1{
			background-color:#ffcc00;
		}
		.tab2{
			background-color: #ff00cc;
		}
		.tab3{
			background-color: #00ccff;
		}
		.content{
			margin-top: 35px;
			width: 360px;
			height: 120px;
			background-color:#ffcc00;
			padding: 50px 20px;
		}
	</style>
	
</head>
<body>
	<div class="wrap">
		<div class="top"><strong style="font-size:25px">多页标签切换</strong></div>
		<div class="tab">
			<div class="tab1 taba">10元套餐</div>
			<div class="tab2 taba">30元套餐</div>
			<div class="tab3 taba">50元套餐</div>
		</div>
		<div class="content">
			10元套餐详情：<br />&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟
		</div>
	</div>
	<script type="text/javascript" src="jQuery/jquery-1.11.3.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".tab1").click(function(){
				$(".content").css("background","#ffcc00")
				$(".content").html(" 10元套餐详情：<br />&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟")
			})
			$(".tab2").click(function(){
				$(".content").css("background","#ff00cc")
				$(".content").html("30元套餐详情：<br />&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟")
			})
			$(".tab3").click(function(){
				$(".content").css("background","#00ccff")
				$(".content").html("50元包月详情：<br />&nbsp;每月无限量随心打")
			})
		})
	</script>
</body>
</html>