【Jquery滑动选项卡】

最新推荐文章于 2024-10-01 20:12:28 发布

柒一’

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量86

点赞数

本文链接：https://blog.csdn.net/m0_67969470/article/details/127837738

版权

CSS JavaScript 选项卡滑动效果前端开发

关键词由CSDN通过智能技术生成

滑动选项卡

css样式

<style>
        .btns input {
            width: 100px;
            height: 40px;
            background-color: grey;
            border: 0;
        }

        .cons {
            width: 500px;
            height: 300px;
            overflow: hidden;
            position: relative;
        }

        .slides {
            width: 1500px;
            height: 300px;
            /*把slide加长*/
            position: absolute;
        }

        .cons>.slides>.litteBox {
            width: 500px;
            height: 300px;
            background-color: gold;
            text-align: center;
            line-height: 300px;
            font-size: 30px;
            float: left;
        }
    </style>

静态

<body>
    <div class="btns">
        <input type="button" value="01" style="background-color: gold" />
        <input type="button" value="02" />
        <input type="button" value="03" />
    </div>
    <div class="cons">
        <div class="slides">
            <div class="litteBox">选项卡1的内 容</div>
            <div class="litteBox">选项卡2的内容</div>
            <div class="litteBox">选项卡3的内容</div>
        </div>
    </div>
</body>

js

<script>
    $('div>input').click(function () {
        $('div>input').eq($(this).index()).css('background', 'gold').siblings().css('background', '')
        $('.slides').animate({ left: '-500'*$(this).index()+'px'}, 1000)
    })
</script>