滑动选项卡

最新推荐文章于 2024-04-26 22:14:41 发布

没有bug的小史

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量178

点赞数

文章标签： css 前端 html jquery javascript

本文链接：https://blog.csdn.net/djsknsns/article/details/127708784

版权

文本

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <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;
            position: absolute;
        }

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

<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>

脚本

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