CSS3-radio实现选项卡切换

最新推荐文章于 2024-07-24 21:48:20 发布

AsaZyf

最新推荐文章于 2024-07-24 21:48:20 发布

阅读量1k

点赞数

文章标签： css3 radio 选项卡切换

本文链接：https://blog.csdn.net/AsaZyf/article/details/82974520

版权

css3 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>radio实现选项卡切换</title>
       <style>
           *{
               margin: 0;
               padding: 0;
           }
           label{
               float: left;
               width: 50px;
               position: relative;
               margin-right: 5px;
           }
           label input{
               position: absolute;
               left: -500px;
               top: -500px;
           }
           label span{
               float: left;
               width: 50px;
               height: 40px;
               text-align: center;
               line-height: 40px;
               border: 1px solid #000000;
               cursor: pointer;
               /*background: red;*/
           }
           label p{
               display: none;
               position: absolute;
               width: 120px;
               border:1px solid #000000;
               top: 43px;
               word-break: break-all;
           }
           label input:checked~span{
               background: red;
           }
           label input:checked~p{
               display: block;
           }
           label:nth-child(2) p{
               left: -55px;
           }
           label:nth-child(3) p{
               left: -110px;
           }
       </style>
   </head>
   <body>
       <label>
           <input type="radio" name="tab" checked="checked" />
           <span>选项1</span>
           <p>选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项1选项</p>
       </label>
       <label>
           <input type="radio" name="tab"/>
           <span>选项1</span>
           <p>选项2</p>
       </label>
       <label>
           <input type="radio" name="tab"/>
           <span>选项1</span>
           <p>选项3</p>
       </label>
   </body>
</html>

AsaZyf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3-radio实现选项卡切换

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;radio实现选项卡切换&lt;/title&gt; &lt;style&gt; *{
复制链接

扫一扫

专栏目录