案例：淘宝服饰精品案例

①核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。

②需要得到当前小li 的索引号，就可以显示对应索引号的图片

③jQuery 得到当前元素索引号 $(this).index()

④中间对应的图片，可以通过 eq(index) 方法去选择

⑤显示元素 show() 隐藏元素 hide()

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;font-size: 12px;}ul {list-style: none;}a {text-decoration: none;}.wrapper {width: 250px;height: 248px;margin: 100px auto 0;border: 1px solid pink;border-right: 0;overflow: hidden;}#left,#content {float: left;}#left li {background: url(images/lili.jpg) repeat-x;}#left li a {display: block;width: 48px;height: 27px;border-bottom: 1px solid pink;line-height: 27px;text-align: center;color: black;}#left li a:hover {background-image: url(images/abg.gif);}#content {border-left: 1px solid pink;border-right: 1px solid pink;}</style><script src="jquery.min.js"></script><script>$(function () {// 1. 鼠标经过左侧的小li $("#left li").mouseover(function () {// 2. 得到当前小li 的索引号var index = $(this).index();console.log(index);// 3. 让我们右侧的盒子相应索引号的图片显示出来就好了$("#content div").eq(index).show();// 4. 让其余的图片（就是其他的兄弟）隐藏起来$("#content div").eq(index).siblings().hide();// 链式编程// $("#content div").eq(index).show().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="data:images/女靴.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="data:images/雪地靴.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="data:images/冬裙.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="data:images/呢大衣.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="data:images/毛衣.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="data:images/棉服.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="data:images/女裤.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="data:images/羽绒服.jpg" width="200" height="250" /></a></div><div><a href="#"><img src="data:images/牛仔裤.jpg" width="200" height="250" /></a></div></div></div>
</body></html>

jQuery 选择器之案例：淘宝服饰精品案例相关推荐

新浪下拉菜单案例淘宝服饰精品案例
目录 1.新浪下拉菜单 2.淘宝服饰精品 1.新浪下拉菜单利用jQuery基础选择器$("选择器") 选择对应的方法实现实现效果实现代码 <script>$(fu ...
Jquery实现淘宝服饰精品案例
需要的效果如下: 布局分析: 1.整个结构由一个div进行包裹,左边放一个ul,ul里面有九个li,每个li里面包含一个a标签:右边放一个div,div里面又包含九个div,每个div里面包含一个a标 ...
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.排他思想淘 ...
56 案例淘宝焦点图布局网页布局总结
案例淘宝焦点图布局如图所示: 案例:淘宝焦点图布局制作 1.大盒子我们类名为: tb-promo 淘宝广告 2.里面先放一张图片. 3.左右两个按钮用链接就好了.左箭头prev右箭头next 4.底侧 ...
AJAX | 跨域与JSONP + 同源策略和跨域 + JSONP + 防抖和节流 + 案例 – 淘宝搜索
目录同源策略和跨域同源策略跨域 JSONP JSONP的实现原理自己实现一个简单的JSONP JSONP的缺点 jQuery中的JSONP 自定义参数及回调函数名称 jQuery中JSONP的 ...
4 Python数据分析淘宝母婴用品数据分析案例
Python数据分析 1 淘宝母婴用品数据分析案例 1.1 数据介绍数据来源:Baby Goods Info Data 1.2 字段介绍婴儿信息数据 Tianchi_mum_baby.csv 字段 ...
jQuery快速入门（淘宝切换服饰、王者荣耀手风琴效果）
一.什么是jQuery jQuery 是一个快速.简洁的 JavaScript 库,其设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情. 二. ...

jQuery 选择器之案例：淘宝服饰精品案例

案例：淘宝服饰精品案例

①核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。

②需要得到当前小li 的索引号，就可以显示对应索引号的图片

③jQuery 得到当前元素索引号 $(this).index()

④中间对应的图片，可以通过 eq(index) 方法去选择

⑤显示元素 show() 隐藏元素 hide()

jQuery 选择器之案例：淘宝服饰精品案例相关推荐

最新文章

热门文章

jQuery 选择器 之 案例：淘宝服饰精品案例

案例：淘宝服饰精品案例

①核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。

②需要得到当前小li 的索引号，就可以显示对应索引号的图片

③jQuery 得到当前元素索引号 $(this).index()

④中间对应的图片，可以通过 eq(index) 方法去选择

⑤显示元素 show() 隐藏元素 hide()

jQuery 选择器 之 案例：淘宝服饰精品案例相关推荐

最新文章

热门文章

jQuery 选择器之案例：淘宝服饰精品案例

jQuery 选择器之案例：淘宝服饰精品案例相关推荐