Jquery实现淘宝服饰精品案例

需要的效果如下：

布局分析：

1.整个结构由一个div进行包裹，左边放一个ul，ul里面有九个li，每个li里面包含一个a标签；右边放一个div，div里面又包含九个div，每个div里面包含一个a标签，a标签里面包含一个img标签。

2.左边的ul和右边的div都进行浮动。保证两个结构在一行显示。

3.左边的li的背景需要实现渐变效果，采用background-image: linear-gradient(方向, 颜色1, 颜色2)进行实现。

功能分析：

1.点击左边的列表右边div对应的图片显示出来，需要对每个li进行点击事件绑定。

2.取出点击的li的索引，然后把对应的div显示出来，其余的隐藏。

这个案例，我写了两个版本的代码，一个是Js版本，一个是Jquery版本。（如果有不懂的可以看注释耶可以在博客下面进行评论，我都会及时解答）

JS版本：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淘宝服饰</title><style>* {margin: 0;padding: 0;}a {text-decoration: none;color: black;font-size: 14px;}.wrapper {margin-left: 300px;margin-top: 200px;}.wrapper #left {float: left;}.wrapper #left li {list-style: none;width: 50px;height: 25px;text-align: center;border: 2px solid #e9d1d0;border-bottom: 0;line-height: 30px;/* 背景渐变 */background-image: linear-gradient(to top, #fcf1ed, #fbfdfb);}.wrapper #left li:last-child {border-bottom: 2px solid #e9d1d0;}.wrapper #content {float: left;overflow: hidden;}.wrapper #content div {display: none;}.wrapper #content div:first-child {display: block;}.wrapper #content img {height: 244px;border: 1px solid #e9d1d0;border-left: 0px;}</style>
</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/女靴.jpg" alt=""></a></div><div><a href="#"><img src="../images/雪地靴.jpg" alt=""></a></div><div><a href="#"><img src="../images/冬裙.jpg" alt=""></a></div><div><a href="#"><img src="../images/呢大衣.jpg" alt=""></a></div><div><a href="#"><img src="../images/男毛衣.jpg" alt=""></a></div><div><a href="#"><img src="../images/棉服.jpg" alt=""></a></div><div><a href="#"><img src="../images/女裤.jpg" alt=""></a></div><div><a href="#"><img src="../images/羽绒服.jpg" alt=""></a></div><div><a href="#"><img src="../images/牛仔裤.jpg" alt=""></a></div></div></div><script>// 获取元素var ul = document.querySelector('ul')var leftlis = ul.querySelectorAll('li')// 获取右边div元素var rightdiv = document.getElementById('content')var rightdivs = rightdiv.querySelectorAll('div')// 设置自定义属性for (var i = 0; i < leftlis.length; i++) {leftlis[i].setAttribute('index', i);}//添加点击事件for (var i = 0; i < leftlis.length; i++) {leftlis[i].addEventListener('click', function() {var index = this.getAttribute('index');// 干掉其他人for (var j = 0; j < rightdivs.length; j++) {rightdivs[j].style.display = 'none';}// 留下我自己rightdivs[index].style.display = 'block';})}</script>
</body></html>

Jquery版本：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>淘宝服饰精品案例</title><script src="../JS/jquery.min.js"></script><style>* {margin: 0;padding: 0;}a {text-decoration: none;color: black;font-size: 14px;}.wrapper {margin-left: 300px;margin-top: 200px;}.wrapper #left {float: left;}.wrapper #left li {list-style: none;width: 50px;height: 25px;text-align: center;border: 2px solid #e9d1d0;border-bottom: 0;line-height: 30px;/* 背景渐变 */background-image: linear-gradient(to top, #fcf1ed, #fbfdfb);}.wrapper #left li:last-child {border-bottom: 2px solid #e9d1d0;}.wrapper #left li:hover {background-image: linear-gradient(to top, #a81911, #f8371b);}.wrapper #content {float: left;overflow: hidden;}.wrapper #content div {display: none;}.wrapper #content div:first-child {display: block;}.wrapper #content img {height: 244px;border: 1px solid #e9d1d0;border-left: 0px;}</style>
</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/女靴.jpg" alt=""></a></div><div><a href="#"><img src="../images/雪地靴.jpg" alt=""></a></div><div><a href="#"><img src="../images/冬裙.jpg" alt=""></a></div><div><a href="#"><img src="../images/呢大衣.jpg" alt=""></a></div><div><a href="#"><img src="../images/男毛衣.jpg" alt=""></a></div><div><a href="#"><img src="../images/棉服.jpg" alt=""></a></div><div><a href="#"><img src="../images/女裤.jpg" alt=""></a></div><div><a href="#"><img src="../images/羽绒服.jpg" alt=""></a></div><div><a href="#"><img src="../images/牛仔裤.jpg" alt=""></a></div></div></div><script>// 获得左边的li元素var leftlis = $('#left>li')// 获得右边的div元素var rightdiv = $('#content>div')// 给左边的li添加点击事件leftlis.click(function() {// 干掉所有人rightdiv.hide();var index = $(this).index();// 留下我自己rightdiv.eq(index).show();})</script>
</body></html>

注意:Jquery版本需要自己去下载jquery.min.js文件。

Jquery实现淘宝服饰精品案例相关推荐

jQuery 选择器之案例：淘宝服饰精品案例
案例:淘宝服饰精品案例 ①核心原理:鼠标经过左侧盒子某个小li,就让内容区盒子相对应图片显示,其余的图片隐藏. ②需要得到当前小li 的索引号,就可以显示对应索引号的图片 ③jQuery 得到当前元素 ...
新浪下拉菜单案例淘宝服饰精品案例
目录 1.新浪下拉菜单 2.淘宝服饰精品 1.新浪下拉菜单利用jQuery基础选择器$("选择器") 选择对应的方法实现实现效果实现代码 <script>$(fu ...
jQuery淘宝服饰精品案例
效果图: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
淘宝服饰精品案例分析
案例分析案例实现代码 <!DOCTYPE html> <html><head lang="en"><meta charset=" ...
jQuery基本使用_选择器_淘宝服饰切换案例_样式操作_效果_王者荣耀手风琴
文章目录一.基本使用 1.jquery入口函数 2.$符 3.DOM对象和jQuery对象的转换二.jquery选择器 1.基础选择器 2.隐式迭代 3.筛选选择器 4.筛选方法 5.排他思想淘 ...
jquery特效-基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 实现的代码. ...
一款基于jQuery仿淘宝红色分类导航
今天给大家分享一款基于jQuery仿淘宝红色分类导航.这款分类导航适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
Jquery利用淘宝接口判断手机运营商和归属地
Jquery利用淘宝接口判断手机运营商和归属地 function findOperator(){var url = "http://tcc.taobao.com/cc/json/mobile ...
jquery仿淘宝SKU选择商品属性代码
jquery仿淘宝SKU选择商品属性代码下载地址:https://www.yujianni.top/news/comp_artinfo.html?id=103

Jquery实现淘宝服饰精品案例

Jquery实现淘宝服饰精品案例相关推荐

最新文章

热门文章