【jquery】实现标签切换效果

最新推荐文章于 2024-05-08 02:39:14 发布

HiganDawn

最新推荐文章于 2024-05-08 02:39:14 发布

阅读量418

点赞数

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

本文链接：https://blog.csdn.net/weixin_42246511/article/details/116076292

版权

html 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

jquery

3 篇文章 0 订阅

订阅专栏

效果展示

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>内容与标签切换效果的实现</title>
	<style type="text/css">
		ul{
			overflow: hidden;
			padding: 0;
		}
		li{
			float: left;
			list-style:none;
			width: 80px;
			border: 1px solid;
			text-align: center;
			cursor:default;
		}
		li.select{background-color: yellow;}
		
		.con-bar{
			display: none;
			width: 300px;height: 100px;
			border: 1px solid;
		}
		.con-bar.select{display: block;}
	</style>
	
</head>
<body>
	<div class="down">
		<ul>
			<li class="select">标签1</li>
			<li class="">标签2</li>
			<li class="">标签3</li>
		</ul>
		<div class="content-group">
			<div class="con-bar select">内容1</div>
			<div class="con-bar">内容2</div>
			<div class="con-bar">内容3</div>
		</div>
	</div>
	
	
	<!-- 这里我直接使用baidu的CDN -->
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		let tag = "ul li";
		// 标签路径
		let con = ".content-group .con-bar";
		// 内容路径
		$(tag).on('click', function(){ //监视标签
			var index = $(this).index();
			// 获取当前点击标签的索引
			$(tag).removeClass('select').eq(index).addClass('select');
			// 所有标签元素去除'select'类.选择索引标签元素.给标签添加类'selsect'类
			$(con).removeClass('select').eq(index).addClass('select');
			// 所有内容元素去除'select'类.选择索引内容元素.给内容添加类'selsect'类
		})
	})
	</script>
</body>
</html>

HiganDawn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【jquery】实现标签切换效果

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>内容与标签切换效果的实现&lt
复制链接

扫一扫