小编给大家分享一下css实现Tab切换的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
方法一、利用a标签的锚点实现tab切换
代码如下：
计算
安全
数据库
网络和加速
企业服务
<!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切换的方法的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
