纯css设置选项卡

最新推荐文章于 2024-07-01 14:15:44 发布

光滑的手指甲

最新推荐文章于 2024-07-01 14:15:44 发布

阅读量2.3k

点赞数

分类专栏： css 文章标签： css选项卡

本文链接：https://blog.csdn.net/shouzhijia/article/details/72957970

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

---------

`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
</head>
<style>
    *{margin: 0;padding:0;}
    .choice{position: absolute;height:300px;width:500px;top: 20%;left: 25%;border:10px solid #20032f;background: #7509ad;color: #fff}
    .choice li{float: left;list-style: none;padding: 20px;}
    .box_con{position: absolute;left: 20px;top: 50px}
    ul li input[type="radio"]{position:absolute;left: -9999px;top:-9999px;}
    /*下面两行是代码的核心*/
    .box_con{display: none}
    .choice [id^="box"]:checked ~ [id^="con"]{display: block;}

</style>
<body>
<ul class="choice">
    <li>
        <!-- name必须相同 -->
        <input type="radio" name="tab" id="box1" checked>
        <label for="box1">选项卡1</label>
        <div class="box_con" id="con2">选项卡1的内容</div>
    </li>
    <li>
        <input type="radio" name="tab" id="box2" hecked>
        <label for="box2">选项卡2</label>
        <div class="box_con" id="con2">选项卡2的内容</div>
    </li>
</ul>   
</body>

</html>`