基于原生js单例模式打造的楼层导航，左右tab实时切换。【硬核】

2401_84092542

于 2024-05-09 00:59:18 发布

阅读量100

点赞数 1

分类专栏：程序员文章标签： javascript 单例模式 css

本文链接：https://blog.csdn.net/2401_84092542/article/details/138591433

版权

程序员专栏收录该内容

282 篇文章 0 订阅

订阅专栏

    background-size: 100% 100%;

    margin-top: 20px;

    padding-top: 50px;

    box-sizing: border-box;

}



header {

    width: 50%;

    height: 80%;

    margin: auto;

    border-radius: 5px;

    background: rgba(244, 243, 244, 0.18);

    box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),

        0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),

        0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);

    backdrop-filter: blur(10px);

}









.content #dianying {

    background-color: rgb(151, 90, 231);

}



.content #yifu {

    background-color: rgb(74, 238, 82);

}



.content #shipin {

    background-color: rgb(236, 223, 35);

}



.content #dianqi {

    background-color: rgb(230, 46, 236);

}



.content #jiaju {

    background-color: rgb(245, 74, 31);

}



.content div {

    width: 100%;

    height: 500px;

    margin: 10px auto;

}



.scrollTopTo {

    width: 50px;

    height: 120px;

    background-color: rgb(34, 143, 231);

    box-sizing: border-box;

    position: absolute;

    top: 205px;

    right: 59px;

}



.list p {

    width: 100%;

    height: 40px;

    line-height: 40px;

    text-align: center;

    background-color: rgb(35, 166, 218);



}



.toTop {

    height: 40px;

    line-height: 40px;

    text-align: center;

    background-color: rgb(35, 166, 218);

    font-size: 20px;

}



.scrollTopTo p:hover {

    cursor: pointer;

}



.toTop:hover {

    cursor: pointer;

}



.active {

    background-color: rgb(223, 148, 35) !important;

    color: red;

}



footer {

    width: 100%;

    height: 300px;

    background-color: rgb(189, 182, 182);

}

<div class="maxbox">

    <div class="nav">

        <header>

            <h1>头部</h1>

        </header>

    </div>

    <div class="content">

        <!-- 电影 -->

        <div id="dianying">

            <h1>电影</h1>

        </div>

        <div id="yifu">

            <h1>衣服</h1>

        </div>

        <div id="shipin">

            <h1>食品</h1>

        </div>

        <div id="dianqi">

            <h1>电器</h1>

        </div>

        <div id="jiaju">

            <h1>家具</h1>

        </div>

    </div>

    <div class="scrollTopTo">

        <div class="list"></div>

        <!-- <p>电影</p>

        <p>衣服</p>

        <p>食品</p>

        <p>电器</p>

        <p>家具</p> -->

        <div class="toTop">

            ∧

        </div>

    </div>





</div>

<footer>

    <h1>底部版权信息</h1>

</footer>