[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="/file/newc/58fae904f38ba8ccebb84f6b76f2d520.jpg" width="440px" height="248px"></li><li><img src="/file/newc/6b0ceb3a9a6beaf4ef41a6fd7d635dd8.jpg" width="440px" height="248px"></li><li><img src="/file/newc/c29709c01a9ae7bdbc52a07b4a6719b6.jpg" width="440px" height="248px"></li><li><img src="/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")})