纯css实现点击导航切换内容

hw_happy

已于 2024-08-30 16:57:10 修改

阅读量212

点赞数 2

文章标签： css 前端

于 2024-08-30 16:44:40 首次发布

本文链接：https://blog.csdn.net/hw_happy/article/details/141721558

版权

前情提要

现在要做一个功能，需要内嵌一个html页面，现在有一个表格有两种状态，仅数据发生变化，所以想要搞一个导航切换组件，最常见的当然是通过click事件尝试去更改display，但是这个页面不能使用js，所以只能尝试纯样式的方式实现切换效果。

贴主找到了一个使用:target伪类来实现。他是用来选中 URL 中哈希（即 # 符号后面的部分）对应的元素。例如：#divB:target 会匹配 <div id="divB"> 元素。

:target伪类实现

<style>
        .hidden {
            display: none;
        }

        /* 默认显示 divAContent */
        #divAContent {
            display: block;
        }

        #divBContent {
            display: none;
        }

        /* 当 divA 被选中时显示 divAContent */
        #divA:target ~ #divAContent {
            display: block;
        }

        /* 当 divB 被选中时显示 divBContent */
        #divB:target ~ #divBContent {
            display: block;
        }

        /* 确保只有一个内容块被显示 */
        #divA:target ~ #divBContent {
            display: none;
        }
        
        #divB:target ~ #divAContent {
            display: none;
        }
    </style>

<body>
    <a href="#divA">dev环境</a>
    <a href="#divB">test环境</a>

    <div id="divA"></div>
    <div id="divB"></div>

    <div id="divAContent">
        <p>这是dev环境下的内容，默认显示</p>
    </div>
    <div id="divBContent">
        <p>这是test环境下的内容，点击切换显示</p>
    </div>
</body>

这样打开浏览器，默认显示的就是第一个div下的内容，切换也会移除其他导航下的内容