纯CSS实现内容切换入门篇

最新推荐文章于 2023-12-18 17:49:56 发布

千瞱

最新推荐文章于 2023-12-18 17:49:56 发布

阅读量771

点赞数

分类专栏：前端文章标签： css 纯css实现多标签内容切换前端面试题

本文链接：https://blog.csdn.net/qq_26822029/article/details/124390873

版权

前端专栏收录该内容

32 篇文章 23 订阅

订阅专栏

如果不能使用js及其扩展库，你能实现一个带标签的可切换内容panel吗？仅仅使用CSS和HTML就可以做到哦~ 您可以先观看一下这个视频感受一下。其实主要是借助了单选框raido的CSS选择器:checked（:checked 选择器匹配每个选中的输入元素，仅适用于单选按钮或复选框）。

效果
在这里插入图片描述

实现代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        body {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .wrapper {
            position: relative;
            width: 1000px;
            height: 400px;
        }
        
        label {
            display: inline-block;
            padding: 5px 10px;
            background-color: gainsboro;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }
        
        label:hover {
            cursor: pointer;
        }
        /* 隐藏radio，只显示标签文字 */
        
        input[type="radio"] {
            display: none;
        }
        
        input[type="radio"]:checked+label {
            background-color: red;
            color: white;
        }
        
        input[type="radio"]:checked+label+div {
            display: block;
        }
        
        .content {
            height: 400px;
            background-color: aliceblue;
        }
        
        .content div {
            display: none;
        }
        
        #navi1:checked~.content>#content1,
        #navi2:checked~.content>#content2,
        #navi3:checked~.content>#content3,
        #navi4:checked~.content>#content4 {
            display: block;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <input type="radio" id="navi1" name="radio" checked/>
        <label for="navi1">标签A</label>
        <input type="radio" id="navi2" name="radio" />
        <label for="navi2">标签B</label>
        <input type="radio" id="navi3" name="radio" />
        <label for="navi3">标签C</label>
        <input type="radio" id="navi4" name="radio" />
        <label for="navi4">标签D</label>

        <div class="content">
            <div id="content1">内容区域A</div>
            <div id="content2">内容区域B</div>
            <div id="content3">内容区域C</div>
            <div id="content4">内容区域D</div>
        </div>
    </div>
</body>

</html>

千瞱

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
纯CSS实现内容切换入门篇

如果不能使用js及其扩展库，你能实现一个带标签的可切换内容panel吗？仅仅使用CSS和HTML就可以做到哦~ 您可以先观看一下这个视频感受一下。其实主要是借助了单选框raido的CSS选择器:checked（:checked 选择器匹配每个选中的输入元素，仅适用于单选按钮或复选框）。效果实现代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title><
复制链接

扫一扫