Jquery指哪打哪案例

by 山河 JQuery

大家好我是山河，今天更新一个Jquery基础用法案例

上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Jquery指哪打哪</title>
		<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
	</head>
	<style>
		ul {
			list-style: none;
		}
		ul li {
			margin-top: 5px;
		}
	</style>
	<body>
		<ul class="one">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
		<ul class="two">
			<li>裤子</li>
			<li>鞋子</li>
			<li>袜子</li>
			<li>衬衫</li>
		</ul>
		<script>
			$(function() {
				$('.two li').eq(0).show().siblings().hide();
				$('.one li').mouseover(function(){
					var i = $(this).index()
					$('.two li').eq(i).show().siblings().hide();
				})
			})
		</script>
	</body>
</html>

好了，本文结束