亲宝软件园·资讯

展开

jQuery选项卡切换图片

丁七岁 人气: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>

加载全部内容

相关教程
猜你喜欢
用户评论