使用jQuery实现选项卡切换图片

最新推荐文章于 2021-08-09 11:12:05 发布

丁七岁

最新推荐文章于 2021-08-09 11:12:05 发布

阅读量1.1k

点赞数 7

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

本文链接：https://blog.csdn.net/qq_43612538/article/details/108986709

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果：
在这里插入图片描述
弄出来这个效果，你需要找4张大小相同的图片，大小不一样弄出来效果会很难看
代码：

<!DOCTYPE html>
<html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>使用jQuery实现选项卡切换图片</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 533px;
                height: 350px;
                border: 1px solid plum;
                margin: 50px auto;
            }
            .nav>li{
                list-style: none;
                width: 133.25px; /*总宽度除以4得到的*/
                height: 50px;
                background: #8000ff;
                text-align: center;
                line-height: 50px;
                float: left;
            }
            .nav>.current{
                background: #69ff8f;
            }
            .content>li{
                list-style: none;
                display: none;
            }
            .content>.show{
                display: block;
            }
        </style>
        <script src="js/jquery-1.12.4.js"></script>
        <script>
            $(function () {
                // 监听选项卡的移入事件
                $(".nav>li").mouseenter(function () {
                    // 修改被移入选项卡的背景颜色
                    $(this).addClass("current");
                    // 还原其它兄弟选项卡的背景颜色
                    $(this).siblings().removeClass("current");
                    // 获取当前移出选项卡的索引
                    var index = $(this).index();
                    // 根据索引找到对应的图片
                    var $li = $(".content>li").eq(index);
                    // 隐藏非当前的其它图片
                    $li.siblings().removeClass("show");
                    // 显示对应的图片
                    $li.addClass("show");
                });
            });
        </script>
    </head>
    <body>
        <div class="box">
            <ul class="nav">
                <li class="current">图片1</li>
                <li>图片2</li>
                <li>图片3</li>
                <li>图片4</li>
            </ul>
            <ul class="content">
                <li class="show"><img src="img/111.jpg" alt=""></li>
                <li><img src="img/222.jpg" alt=""></li>
                <li><img src="img/333.jpg" alt=""></li>
                <li><img src="img/444.jpg" alt=""></li>
            </ul>
        </div>
    </body>
</html>

丁七岁

关注

7
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
使用jQuery实现选项卡切换图片

效果：弄出来这个效果，你需要找4张大小相同的图片，大小不一样弄出来效果会很难看代码：<!DOCTYPE html><html lang="ch"> <head> <meta charset="UTF-8"> <title>使用jQuery实现选项卡切换图片</title> <style> *{ margi
复制链接

扫一扫