淘宝精品服饰案例用JQuery实现

最新推荐文章于 2022-10-19 21:12:16 发布

孙行者ღ

最新推荐文章于 2022-10-19 21:12:16 发布

阅读量567

点赞数 2

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_51443864/article/details/122097083

版权

淘宝精品服饰案例用JQuery实现

效果图如下：
在这里插入图片描述
实现代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝精品服饰案例</title>
<style>
* {
margin: 0;
padding: 0;
}

ul {
list-style: none;
}

a {
text-decoration: none;
}

.wrapper {
width: 252px;
height: 250px;
margin: 100px auto;
border: 1px solid pink;
overflow: hidden;
}
	#left{
		float: left;
	}
	#left li{
		width: 48px;
		height: 27px;
		text-align: center;
		border-bottom: 1px solid pink;
		line-height: 27px;
		padding: 0 2px;
		}
	#left li a{
		color: #000;
	}
	 
</style>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script>
		$(function(){
			$("#left li").mouseover(function(){
				var index=$(this).index();
				$("#content div").eq(index).show();
				$("#content div").eq(index).siblings().hide();
			})
		})
	</script>
</head>

<body>
	 <div class="wrapper">
        <ul id="left">
            <li><a href="#">女靴</a></li>
            <li><a href="#">雪地靴</a></li>
            <li><a href="#">冬裙</a></li>
            <li><a href="#">呢大衣</a></li>
            <li><a href="#">毛衣</a></li>
            <li><a href="#">棉服</a></li>
            <li><a href="#">女裤</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">牛仔裤</a></li>
        </ul>
        <div id="content">
            <div>
                <a href="#"><img src="images/nv.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/xdx.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/dq.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/ndy.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/my.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/mf.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/nk.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/yrf.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/nzk.jpg" width="200" height="250" /></a>
            </div>

        </div>
    </div>   
</body>
</html>