2022-06-13 jQuery案例:滑动选项卡

前端OnTheRun

已于 2022-09-29 16:59:24 修改

阅读量251

点赞数

分类专栏： jQuery 项目与应用文章标签： javascript jquery jq 选项卡 animate

于 2022-06-13 22:30:32 首次发布

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/125268945

版权

项目与应用同时被 2 个专栏收录

59 篇文章

订阅专栏

jQuery

16 篇文章

订阅专栏

本文通过jQuery展示了如何创建一个滑动选项卡效果。利用animate方法改变选中框的位置，形成平滑的动画过渡，并调整层级以确保内容正确显示。同时，底部内容会根据顶部选项卡的变化实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路

设置一个单独的选中框,
通过在animate中设置其left值,造成其从当前选项往目标选项移动的动画效果,
设置其层级,确保其处于选项内容的下方
底部内容随顶部选项卡改变

代码

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
    * {padding: 0;margin: 0;}
    li { list-style-type: none; } 
    .header { position: relative; display: flex;background: pink;width: 500px;}
     p {position: absolute; left: 0;top: 0; width: 100px;height: 30px; border-bottom: 5px solid blue;background: skyblue;}
    .header li { width: 96px; height: 26px;text-align: center;line-height: 30px;border: 2px solid black;z-index: 100;}
    .box li { width: 500px;height: 200px;background: yellow;display: none;}
    .box .active {display: block;}
</style>

<body>
    <div class="header">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <p></p>
    </div>
    <div class="box">
        <li class="active">111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </div>
</body>
<script>
    // 鼠标移动,选中框往目标li移动
    $(".header>li").mousemove(function() {
        $("p").stop().animate({
            left: $(this).index() * 100
        });
        // 内容框跟着改变
        $(".box>li").eq($(this).index()).addClass("active").siblings().removeClass("active");
    });
</script>