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

华为云数据仓库专业级开发者认证重磅发布

avatar 华为开发者空间
cover

KubeEdge 新版本5大特性解读：更完备的节点设备能力，全新的Dashboard体验

avatar 华为开发者空间
cover

一文带你搞懂GaussDB数据库性能调优

avatar 华为开发者空间