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

最新推荐文章于 2020-12-07 13:58:33 发布

^ω^奋斗小青年

最新推荐文章于 2020-12-07 13:58:33 发布

阅读量516

点赞数

分类专栏： jQuery 文章标签： html css js jquery

本文链接：https://blog.csdn.net/DeathDomain/article/details/106806508

版权

jQuery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

电影排行榜

实现效果展示

在这里插入图片描述

实现步骤

第一步(实现静态效果)

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")
})