使用JQuery实现图片与标签的绑定切换

最新推荐文章于 2024-10-02 09:00:21 发布

Z0o1010

最新推荐文章于 2024-10-02 09:00:21 发布

阅读量144

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/weixin_48732879/article/details/109709123

版权

JQuery 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="./css/Test.css"/>
	</head>
	
	<body>
		<div class="box">
			<ul class="nav">
				<li class="current">Red</li>
				<li>Yellow</li>
				<li>Blue</li>
			</ul>
			<ul class="content">
				<li class="show"><img src="./img/Red.png"></li>
				<li><img src="./img/Yellow.png"></li>
				<li><img src="./img/Blue.png"></li>
			</ul>
		</div>
	</body>
	
	<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript" src="./js/JQuery.js"></script>
	<script type="text/javascript" src="./js/JavaScript.js"></script>
</html>

Test.css

* {
	margin: 0;
	padding: 0;
}

.box {
	width: 440px;
	height: 298px;
	border: 1px saddlebrown #000;
	margin: 50px auto;
}

.nav>li {
	list-style: none;
	width: 110px;
	height: 50px;
	background-color: orange;
	text-align: center;
	line-height: 50px;
	float: left;
}

.nav>.current {
	background-color: #ccc;
}

.content>li {
	list-style: none;
	display: none;
}

.content>.show {
	display: block;
}

JQuery.js

$(".nav>li").mouseenter(function(){
	// 1、修改被移入选项卡的背景颜色
	$(this).addClass("current");
	// 2、还原其它选项卡的背景颜色
	$(this).siblings().removeClass("current");
	// 3、获取当前移出选项卡的索引
	var index = $(this).index();
	// 4、根据索引找到对应的图片
	var $li = $(".content>li").eq(index);
	// 5、隐藏对应的图片
	$li.addClass("show");
	// 6、移除非当前的其它图片
	$li.siblings().removeClass("show");
})