选项卡的实现（不写js代码）

最新推荐文章于 2023-07-21 22:38:10 发布

wyflzq

最新推荐文章于 2023-07-21 22:38:10 发布

阅读量305

点赞数

本文链接：https://blog.csdn.net/wyflzq/article/details/81149173

版权

1、不写js代码，利用:target属性

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           *{
               margin:0;
               padding: 0;
           }
           a{
               text-decoration:none;
               color:deeppink;
           }
           div{
               width: 200px;
               height: 200px;
               background: pink;
               display:none;
               text-align:center;
               font:50px/200px "微软雅黑";
           }
           :target{
               display:block;
           }

</style>
   </head>
   <body>
       
       <a href="#div1">div1</a>
       <a href="#div2">div2</a>
       <a href="#div3">div3</a>
       
       <div id="div1">div1</div>
       <div id="div2">div2</div>
       <div id="div3">div3</div>
   </body>
</html>

优惠劵

wyflzq

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡的实现（不写js代码）

1、不写js代码，利用:target属性&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&amp
复制链接

扫一扫