脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery选项卡切换图片

jQuery实现选项卡切换图片

 更新时间：2022年01月25日 09:38:21   作者：丁七岁  
这篇文章主要为大家详细介绍了jQuery实现选项卡切换图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了jQuery实现选项卡切换图片的具体代码，供大家参考，具体内容如下

效果：

弄出来这个效果，你需要找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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论