CSS3 tab选项卡动态切换
分类：实例代码
CSS3 tab选项卡动态切换属于前端实例代码，有关更多实例代码大家可以查看。
本章节分享一段代码实例，它利用css3实现了tab选项卡功能。
在css3之前，实现选项卡都要借助于JavaScript。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
.main {
width: 450px;
height: 200px;
margin: 0 auto;
position: relative;
}
.main > input {
opacity: 0;
width: 150px;
height: 40px;
position: absolute;
z-index: 33;
top: 0;
cursor: pointer;
}
.main > span {
width: 150px;
height: 40px;
line-height: 40px;
position: absolute;
top: 0;
text-align: center;
overflow: hidden;
background: #f0f0f0;
}
.main > span {
transition: all .5s;
}
.ys {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.main > input:hover + span {
background: rgba(255,255,255,.1);
}
.main > input:checked + span {
background: #fff;
}
.main > input:hover + span, .main > input :checked + span {
color: #3498db;
}
#tab-1, #tab-1 + span {
left: 0;
}
#tab-2, #tab-2 + span {
left: 33.33%;
}
#tab-3, #tab-3 + span {
left: 66.66%;
}
.line {
background: #3498db;
width: 33.33%;
height: 4px;
top: 36px;
position: absolute;
}
#tab-1:checked ~ .line {
left: 0;
}
#tab-2:checked ~ .line {
left: 33.33%;
}
#tab-3:checked ~ .line {
left: 66.66%;
}
.ease {
transition: all .5s;
}
.content {
width: 450px;
height: 160px;
padding: 60px 0;
}
.content section {
width: 450px;
display: none;
}
.content section div {
font-size: 18px;
color: #cc3300;
}
#tab-1:checked ~ .content #tab-item-1 {
display: block;
}
#tab-2:checked ~ .content #tab-item-2 {
display: block;
}
#tab-3:checked ~ .content #tab-item-3 {
display: block;
}
</style>
</head>
<body>
<div class="main">
<input type="radio" id="tab-1" name="tab" checked>
<span href="#tab-item-1" class="ys">前端教程网一</span>
<input type="radio" id="tab-2" name="tab">
<span href="#tab-item-2" class="ys">前端教程网二</span>
<input type="radio" id="tab-3" name="tab">
<span href="#tab-item-3" class="ys">前端教程网三</span>
<div class="line ease"></div>
<div class="content">
<section id="tab-item-1">
<div>内容一</div>
</section>
<section id="tab-item-2">
<div>内容二</div>
</section>
<section id="tab-item-3">
<div>内容三</div>
</section>
</div>
</div>
</body>
</html>
CSS3 tab选项卡动态切换，这样的场景在实际项目中还是用的比较多的，关于CSS3 tab选项卡动态切换就介绍到这了。