演示代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="reset.css"/>
        <style type="text/css">
            .box{width: 302px;height: 302px;border: 1px solid #000;
            text-align: center;margin: 100px auto;}
            nav{width: 300px;height: 30px;border-bottom: 2px solid #000;}
            nav a{width: 100px;height: 30px;line-height: 30px;display: block;float: left;}
            .content{width: 300px;height: 270px;position: relative;}
            .cont{width: 300px;height: 270px;line-height: 270px;position: absolute;top: 0;left: 0;}
            #one{background-color: #ff0000;z-index: 1;}
            #two{background-color: #00ff00;}
            #three{background-color: #0000ff;}
            #one:target,#two:target,#three:target{z-index: 2;}
        </style>
    </head>
    <body>
        <div class="box">
            <!-- 注意：target伪类加在目标元素上 -->
            <!-- nav>a*3 -->
            <nav>
                <a href="#one">按钮1</a>
                <a href="#two">按钮2</a>
                <a href="#three">按钮3</a>
            </nav>
            <div class="content">
                <div id="one" class="cont">内容1</div>
                <div id="two" class="cont">内容2</div>
                <div id="three" class="cont">内容3</div>
            </div>
        </div>
    </body>
</html>
打开支付宝首页搜“559920739”领红包，领到大红包的小伙伴赶紧使用哦！ （如果你觉得本文不错，请扫描下面二维码随意打赏哦）
最后修改：2020 年 09 月 15 日
© 禁止转载
如果觉得我的文章对你有用，请随意赞赏