css如何实现Tab切换

互联网 20-8-25

方法一、利用a标签的锚点实现tab切换

（推荐教程：CSS教程）

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8">     <title>cssTab切换2</title>     <style type="text/css">         *{             margin: 0;             padding: 0;             text-decoration: none;         }         .tab{             width: 300px;             height: 300px;             margin: 30px auto;             overflow: hidden;         }         .nav{             height: 30px         }         .content{             height: 270px;             overflow: hidden;         }         .cont{             height: 270px;         }         #the1{             background: green;         }         #the2{             background: blue;         }     </style> </head> <body> <div class="tab">     <div class="nav">         <a href="#the1">ONE</a>         <a href="#the2">TWO</a>     </div>     <div class="content">         <div id="the1" class="cont">第一张</div>         <div id="the2" class="cont">第二张</div>     </div> </div> </body> </html>

（学习视频推荐：css视频教程）

方法二、利用radio按钮和:checked选择器

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="utf-8">     <title>纯css实现tab切换</title>     <style type="text/css">         *{             margin: 0;             padding: 0;         }         .tab{             width: 300px;             height: 150px;             margin-left: 30px;             margin-top: 30px;             border: 1px solid #eee;             position: relative;             overflow: hidden;         }         input[type='radio']{             display: none;         }         .tab label{             display: block;             cursor: pointer;             position: absolute;             width: 60px;             height: 30px;             line-height: 30px;             text-align: center;             border: 1px solid #eee;         }         .label-1{             left: 0;             top: 0;         }         .label-2{             left: 60px;             top: 0;         }         input[type='radio']:checked~div[class^='mod']{             display: block;         }         input[type='radio']:checked~label{             background: orange;         }         [class^='mod']{             position: absolute;             top: 40px;             left: 20px;             display: none;         }     </style> </head> <body>     <div class="tab">         <div>             <input type="radio" id="r-1" name="tab" checked>             <label for="r-1" class="label-1">第一张</label>             <div class="mod-1">                 <ul>                     <li>275万购昌平邻铁三居</li>                     <li>总价20万买一居</li>                     <li>200万内购五环三居</li>                     <li>北京首现零首付楼盘</li>                 </ul>             </div>         </div>         <div>             <input type="radio" id="r-2" name="tab">             <label for="r-2" class="label-2">第二张</label>             <div class="mod-2">                 <ul>                     <li>新中式的酷色温情</li>                     <li>深圳房价大跌,每平8W</li>                     <li>800万买沙井三房</li>                     <li>宝安房价平均900W</li>                 </ul>             </div>         </div>     </div> </body> </html>

以上就是css如何实现Tab切换的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： tab