JQuery之淘宝精品案例
Posted 代码黑洞
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery之淘宝精品案例相关的知识，希望对你有一定的参考价值。
html
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>淘宝精品案例</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="wrap">
<div id="left">
<ul>
<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>
<div id="center">
<ul>
<li><img src="img/外套.jpg" alt="外套" /></li>
<li><img src="img/雪地鞋.jpg" alt="雪地鞋" /></li>
<li><img src="img/冬裙.jpg" alt="冬裙" /></li>
<li><img src="img/尼大衣.jpg" alt="尼大衣" /></li>
<li><img src="img/毛衣.jpg" alt="毛衣" /></li>
<li><img src="img/男棉服.jpg" alt="棉服" /></li>
<li><img src="img/女裤.jpg" alt="女裤" /></li>
<li><img src="img/羽绒服.jpg" alt="羽绒服" /></li>
<li><img src="img/牛仔裤.jpg" alt="牛仔裤" /></li>
<li><img src="img/女包.png" alt="女包" /></li>
<li><img src="img/男鞋.jpg" alt="男靴" /></li>
<li><img src="img/登山靴.jpg" alt="登山鞋" /></li>
<li><img src="img/皮带.jpg" alt="皮带" /></li>
<li><img src="img/围巾.jpg" alt="围巾" /></li>
<li><img src="img/皮衣.jpg" alt="皮衣" /></li>
<li><img src="img/男毛衣.jpg" alt="男毛衣" /></li>
<li><img src="img/男棉服.jpg" alt="男棉服" /></li>
<li><img src="img/男包.jpg" alt="男包" /></li>
</ul>
</div>
<div id="right">
<ul>
<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>
</div>
</body>
//jQuery代码
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$("#left>ul>li").mouseenter(function(){
//让center中对应下标的li显示，其他的li隐藏
var index = $(this).index();
$("#center>ul>li:eq("+index+")").show().siblings().hide();
});
$("#right>ul>li").mouseenter(function(){
//让center中对应下标的li显示，其他的li隐藏
var index = $(this).index()+9;
$("#center>ul>li:eq("+index+")").show().si lings().hide();
});
});
</script>
</html>
css
*{
margin: 0;
padding: 0;
}
li,a{
color: black;
text-decoration: none;
list-style: none;
}
body{
font-family: tahoma, helvetica, arial, sans-serif;
font-size: 15px;
}
#wrap{
width: 615px;
height: 550px;
border: 1px solid #f94a14;
background-color: #fbfbfb;
margin: 0 auto;
margin-top: 18px;
overflow: hidden;
}
#left,#right{
margin-top: 5px;
}
#left{
float: left;
}
#left li,#right li{
height: 58px;
width: 80px;
background-color: #ff8a00;
border: 1px solid #f94a14;
line-height: 58px;
text-align: center;
}
#left li:hover , #right li:hover{
background-color: #ff5000;
}
#left li:hover a, #right li:hover a{
color: white;
}
#center{
width: 300px;
background-color: coral;
float: left;
}
#center img{
width: 450px;
height: 550px;
overflow: hidden;
}
#right{
background-color: hotpink;
float: right;
}
获取完整源码请在评论区留下邮箱，会通过邮箱发送给你
以上是关于JQuery之淘宝精品案例的主要内容，如果未能解决你的问题，请参考以下文章