[jQuery基础] jQuery事件相关案例 — 电影排行榜、Tab选项卡

电影排行榜

实现效果展示

实现步骤

第一步(实现静态效果)

• css部分

*{margin: 0;padding: 0;}.box{width: 300px;height: 450px;margin: 50px auto;border: 1px solid #000;cursor: pointer;}.box>h1{font-size: 20px;line-height: 35px;color: deeppink;padding-left: 10px;border-bottom: 1px dashed #ccc;}ul>li{list-style: none;padding: 5px 10px;border: 1px dashed #ccc;}ul>li:nth-child(-n+3) span{background: deeppink;}ul>li>span{display: inline-block;width: 20px;height: 20px;background: #ccc;text-align: center;line-height: 20px;margin-right: 10px;}.content{overflow: hidden;margin-top: 5px;display: none;}.content>img{width: 85px;height: 120px;float: left;}.content>p{width: 180px;height: 120px;float: right;font-size: 12px;line-height: 20px;}.current .content{display: block;}

• html部分

<div class=\"box\"><h1>电影排行榜</h1><ul><li><span>1</span>电影名称<div class=\"content\"><img src=\"images/07.jpg\" alt=\"\"><p>简介：测试内容</p></div></li><li><span>2</span>电影名称<div class=\"content\"><img src=\"images/07.jpg\" alt=\"\"><p>简介：测试内容</p></div></li><li><span>3</span>电影名称<div class=\"content\"><img src=\"images/07.jpg\" alt=\"\"><p>简介：测试内容</p></div></li><li><span>4</span>电影名称<div class=\"content\"><img src=\"images/07.jpg\" alt=\"\"><p>简介：测试内容</p></div></li><li><span>5</span>电影名称<div class=\"content\"><img src=\"images/07.jpg\" alt=\"\"><p>简介：测试内容</p></div></li><li><span>6</span>电影名称<div class=\"content\"><img src=\"images/07.jpg\" alt=\"\"><p>简介：测试内容</p></div></li></ul></div>

第二步(动态实现)

主要用到的是事件的移入移出

• 当鼠标移入后隐藏的div显示出来
• 当鼠标移出后显示的div隐藏起来

第一种方法

$(\"li\").mouseenter(function () {$(this).addClass(\"current\");});// 2.监听li的移出事件$(\"li\").mouseleave(function () {$(this).removeClass(\"current\");});

第二种方法

$(\"li\").hover(function () {$(this).addClass(\"current\");}, function () {$(this).removeClass(\"current\");});

第三种方法

$(\'li\').hover(function () {$(this).toggleClass(\'current\')})

Tab选项卡

实现效果展示

实现步骤

第一步(静态效果)

• css样式

*{margin: 0;padding: 0;}.box{width: 440px;height: 298px;border: 1px solid #000;margin: 50px auto;cursor: pointer;}.nav>li{list-style: none;width: 110px;height: 50px;background: orange;text-align: center;line-height: 50px;float: left;}.nav>.current{background: #ccc;}.content>li{list-style: none;display: none;}.content>.show{display: block;}

• html样式

<div class=\"box\"><ul class=\"nav\"><li class=\"current\">独傲松鼠</li><li>功夫花栗鼠</li><li>飞翔松鼠</li><li>蹦迪松鼠</li></ul><ul class=\"content\"><li class=\"show\"><img src=\"http://img.netbian.com/file/newc/58fae904f38ba8ccebb84f6b76f2d520.jpg\" width=\"440px\" height=\"248px\"></li><li><img src=\"http://img.netbian.com/file/newc/6b0ceb3a9a6beaf4ef41a6fd7d635dd8.jpg\" width=\"440px\" height=\"248px\"></li><li><img src=\"http://img.netbian.com/file/newc/c29709c01a9ae7bdbc52a07b4a6719b6.jpg\" width=\"440px\" height=\"248px\"></li><li><img src=\"http://img.netbian.com/file/newc/30564ad632b2f71758f2531aae912490.jpg\" width=\"440px\" height=\"248px\"></li></ul></div>

第二步(动态实现)

第一种方法(有一点点bug)

主要运用到了移入移出事件

• 监听选项卡的移入事件修改被移入选项卡的背景颜色
• 获取当前移入选项卡的索引
• 根据索引找到对应的图片
• 显示找到的图片

$(\".nav>li\").mouseenter(function () {// 1.1修改被移入选项卡的背景颜色$(this).addClass(\"current\")// 1.2获取当前移入选项卡的索引var index = $(this).index()// 1.3根据索引找到对应的图片var $li = $(\".content>li\").eq(index)// 1.4显示找到的图片$li.addClass(\"show\")})

• 监听选项卡的移出事件还原选项卡的背景颜色
• 获取当前移出选项卡的索引
• 根据索引找到对应的图片
• 隐藏对应的图片

$(\".nav>li\").mouseleave(function () {// 1.1还原选项卡的背景颜色$(this).removeClass(\"current\")// 1.2获取当前移出选项卡的索引var index = $(this).index()// 1.3根据索引找到对应的图片var $li = $(\".content>li\").eq(index)// 1.4隐藏对应的图片$li.removeClass(\"show\")})

第二种方法

主要运用到了**siblings()**方法 – 允许我们在DOM树中搜索这些元素的兄弟节点，并从匹配的元素构造一个新的jQuery对象。

• 监听选项卡的移入事件修改被移入选项卡的背景颜色
• 还原其它兄弟选项卡的背景颜色
• 获取当前移出选项卡的索引
• 根据索引找到对应的图片
• 隐藏非当前的其它图片
• 显示对应的图片

// 1.监听选项卡的移入事件$(\".nav>li\").mouseenter(function () {// 1.1修改被移入选项卡的背景颜色$(this).addClass(\"current\")// 1.2还原其它兄弟选项卡的背景颜色$(this).siblings().removeClass(\"current\")// 1.3获取当前移出选项卡的索引var index = $(this).index()// 1.4根据索引找到对应的图片var $li = $(\".content>li\").eq(index)// 1.5隐藏非当前的其它图片$li.siblings().removeClass(\"show\")// 1.6显示对应的图片$li.addClass(\"show\")})