CSS绘制标签导航栏

最新推荐文章于 2024-05-06 11:00:47 发布

韩召华

最新推荐文章于 2024-05-06 11:00:47 发布

阅读量267

点赞数

分类专栏： vue javaScript 文章标签： css 前端 java

本文链接：https://blog.csdn.net/qq_43787947/article/details/125426545

版权

vue 同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

javaScript

16 篇文章 0 订阅

订阅专栏

html:

<div class="bruce flex-ct-x">

    <div class="tab-navbar">

        <input type="radio" name="tabs" id="tab1" hidden checked>

        <input type="radio" name="tabs" id="tab2" hidden>

        <input type="radio" name="tabs" id="tab3" hidden>

        <input type="radio" name="tabs" id="tab4" hidden>

        <nav>

            <label for="tab1">标题1</label>

            <label for="tab2">标题2</label>

            <label for="tab3">标题3</label>

            <label for="tab4">标题4</label>

        </nav>

        <main>

            <ul>

                <li>内容1</li>

                <li>内容2</li>

                <li>内容3</li>

                <li>内容4</li>

            </ul>

        </main>

    </div>

</div>

css(scss):

.tab-navbar {

    display: flex;

    overflow: hidden;

    flex-direction: column-reverse;

    border-radius: 10px;

    width: 300px;

    height: 400px;

    input {

        &:nth-child(1):checked {

            & ~ nav label:nth-child(1) {

                @extend .active;

            }

            & ~ main ul {

                background-color: #f66;

                transform: translate3d(0, 0, 0);

            }

        }

        &:nth-child(2):checked {

            & ~ nav label:nth-child(2) {

                @extend .active;

            }

            & ~ main ul {

                background-color: #66f;

                transform: translate3d(-25%, 0, 0);

            }

        }

        &:nth-child(3):checked {

            & ~ nav label:nth-child(3) {

                @extend .active;

            }

            & ~ main ul {

                background-color: #f90;

                transform: translate3d(-50%, 0, 0);

            }

        }

        &:nth-child(4):checked {

            & ~ nav label:nth-child(4) {

                @extend .active;

            }

            & ~ main ul {

                background-color: #09f;

                transform: translate3d(-75%, 0, 0);

            }

        }

    }

    nav {

        display: flex;

        height: 40px;

        background-color: #f0f0f0;

        line-height: 40px;

        text-align: center;

        label {

            flex: 1;

            cursor: pointer;

            transition: all 300ms;

        }

    }

    main {

        flex: 1;

        ul {

            display: flex;

            flex-wrap: nowrap;

            width: 400%;

            height: 100%;

            transition: all 300ms;

        }

        li {

            display: flex;

            justify-content: center;

            align-items: center;

            flex: 1;

            font-weight: bold;

            font-size: 20px;

            color: #fff;

        }

    }

}

.active {

    background-color: #3c9;

    color: #fff;

}