<!DOCTYPE html>
<html>
<head>
<title>1</title>
<style type="text/css">
input, section {clear: both;display: none;}
label{float: left;line-height: 40px;margin-top: 7px;}
label a{
border-right: 1px solid #74808f;
color: #000;
font-size: 14px;
line-height: 20px;
display: inline-block;
margin: 10px 0;
width: 100px;
text-align: center;
margin-top: 7px;
}
label a:last-of-type a{
border-right: none;
}
label a:first-of-type{
margin-left: 10px;
}
#tab1:checked ~ #cent1, #tab2:checked ~ #cent2, #tab3:checked ~ #cent3, #tab4:checked ~ #cent4 {display: block;}
</style>
</head>
<body>
<div class="tabBox">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><a>tab1</a></label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2"><a>tab2</a></label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3"><a>tab3</a></label>
<section id="cent1">
<div>tab1</div>
</section>
<section id="cent2">
<div>tab2</div>
</section>
<section id="cent3">
<div>tab3</div>
</section>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
