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>方法二、利用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>
猜你喜欢
评论(0)
