Nearth===>WEB前端--JQuery/QQ美女联系列表(好友面板切换案列)

最新推荐文章于 2023-04-07 17:50:18 发布

码字界陈冠希

最新推荐文章于 2023-04-07 17:50:18 发布

阅读量186

点赞数

分类专栏： WEB前端第三季/JQuery

本文链接：https://blog.csdn.net/ly1716/article/details/102842080

版权

WEB前端第三季/JQuery 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

先看效果：（hihi）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<title>Nearth</title>
		<style type="text/css">
			body{
				background-color: lightpink;
			}
			#u li{
				margin-bottom: 10px;
				background-color: orange;
				font-size: 20px;
				font-weight: border;
				cursor: pointer;
			}
			#u li ul{
				list-style-type: none;
				margin:0;
				padding: 0;
			}
			#u li ul li{
				background-color: lightpink;
			}
			img{
				height:200px;
				width:200px;
			}
		</style>
		<script>
			$(function(){
				$("#u>li>ul>li").hide();
				$("#u>li").click(function(){
					$(this).siblings("li").children("ul").find("li").hide(500);
					$(this).children("ul").find("li").show(500);
				})
			})
		</script>
	</head>
	<body>
		<h1>Nearth----QQ美女联系列表(好友面板切换案列)</h1>
		<hr style="size:3px;color: #FF4500;">
		<div style="width:200px;height:600px;border:2px solid red;border-radius: 2px;background-image: url(0.jpg);">
			<h1 style="font-size: 30px;color: aquamarine;">我的美女朋友</h1>
			<ul id="u"style="list-style-type: none;margin:0;padding: 0;text-align: center;">
				<li>
					精品美女
					<hr >
					<ul>
						<li>name:西施 price:20$<img src="1.jpg"></li>
					</ul>
				</li>
				<li>
					性感美女
					<hr >
					<ul>
						<li>name:貂蝉 price:20$<img src="2.jpg"></li>
					</ul>
				</li>
				<li>
					清纯美女
					<hr >
					<ul>
						<li>name:王昭君 price:20$<img src="3.jpg"></li>
					</ul>
				</li>
				<li>
					绝世美女
					<hr >
					<ul>
						<li>name:杨玉环 price:20$<img src="4.jpg"></li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
</html>

(注意：图片自己去找~~~)

我感觉学习这东西蛮好玩的~~~~~~~小主人，你觉得呢

码字界陈冠希

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Nearth===>WEB前端--JQuery/QQ美女联系列表(好友面板切换案列)

先看效果：（hi~~hi~~）<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> ...
复制链接

扫一扫