html 实现tab选项卡

效果：

在这里插入图片描述

1.html

<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">

    <title>CSS3外观漂亮淡入淡出Tab菜单演示</title>

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css"/>
    <script type="text/javascript" src="js/jquery.js"></script>

</head>

<body>
<div class="ant-tabs-nav-wrap">
    <div class="ant-tabs-nav-scroll">
        <div class="ant-tabs-nav ant-tabs-nav-animated">
            <div>
                <div role="tab" aria-disabled="false"  data-index="0" class="ant-tabs-tab-active ant-tabs-tab">
                    一线监控
                </div>
                <div role="tab" aria-disabled="false"  data-index="1" class=" ant-tabs-tab">
                    二线监控
                </div>

                <div role="tab" aria-disabled="false"  data-index="2" class=" ant-tabs-tab">
                    归档监控
                </div>
            </div>
            <div id="article" class="ant-tabs-ink-bar ant-tabs-ink-bar-animated tabs-active1-style"></div>
        </div>
    </div>
</div>

</body>
<script>
    let $article = $('#article');
    $('.ant-tabs-tab').on('click', function () {
        //删除选中的样式
        $('.ant-tabs-tab').removeClass("ant-tabs-tab-active")
        //线条移动
        $article.css({
            "transform": "translate3d("+$(this).attr('data-index')*132+"px, 0px, 0px)"
        });
        //选中tab样式
        this.classList.add("ant-tabs-tab-active")
    });
</script>

</html>

2.css

.ant-tabs-nav-wrap {
    margin-bottom: -1px;
    overflow: hidden
}

.ant-tabs-nav-scroll {
    overflow: hidden;
    white-space: nowrap;
}

.ant-tabs-nav {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    padding-left: 0;
    list-style: none;
    transition: transform .3s cubic-bezier(.645, .045, .355, 1);
}

.ant-tabs-nav .ant-tabs-tab {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    height: 100%;
    margin: 0 32px 0 0;
    padding: 12px 16px;
    text-decoration: none;
    cursor: pointer;
    transition: color .3s cubic-bezier(.645,.045,.355,1);
}

.ant-tabs-nav .ant-tabs-tab:last-child {
    margin-right: 0;
}
.ant-tabs-nav .ant-tabs-tab-active {
    color: #0080cc;
    font-weight: 500;
}
.ant-tabs-nav .ant-tabs-tab {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    height: 100%;
    margin: 0 32px 0 0;
    padding: 12px 16px;
    text-decoration: none;
    cursor: pointer;
    transition: color .3s cubic-bezier(.645,.045,.355,1);
}
*, :after, :before {
    box-sizing: border-box;
}
用户代理样式表
div {
    display: block;
}
.ant-tabs-nav {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    padding-left: 0;
    list-style: none;
    transition: transform .3s cubic-bezier(.645,.045,.355,1);
}

.ant-tabs-nav-scroll {
    overflow: hidden;
    white-space: nowrap;
}

.tabs-active1-style {
    display: block;
    transform: translate3d(0px, 0px, 0px);
    width: 96px !important;
}

.tabs-active2-style {
    display: block;
    transform: translate3d(144px, 0px, 0px);
    width: 96px !important;
}
.tabs-active3-style {
    display: block;
    transform: translate3d(288px, 0px, 0px);
    width: 96px !important;
}

.ant-tabs-ink-bar-animated {
    transition: transform .3s cubic-bezier(.645,.045,.355,1),width .2s cubic-bezier(.645,.045,.355,1),left .3s cubic-bezier(.645,.045,.355,1);
}

.ant-tabs-ink-bar {
    position: absolute;
    bottom: 1px;
    left: 0;
    z-index: 1;
    box-sizing: border-box;
    width: 0;
    height: 2px;
    background-color: #0080cc;
    transform-origin: 0 0;
}
# html # css # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

GaussDB数据库SQL系列-复合查询

avatar 华为云开发者联盟