<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="author" content="helang.love@qq.com">
<title>tab选项卡</title>
<style type="text/css">
.test_box {
width: 50%;
min-height: 250px;
margin: 1em auto;
position: relative;
}
.test_tab {
width: 25%;
margin-right: -1px;
border: 1px solid #ccc;
border-bottom: 0;
float: left;
}
.test_label {
display: block;
padding-top: 5px;
padding-bottom: 5px;
background-color: #eee;
text-align: center;
}
.test_radio,
.test_tab_content {
position: absolute;
left: -999em;
}
.test_radio:checked~.test_tab_content {
margin-top: -1px;
padding: 1em 2em;
border: 1px solid #ccc;
left: 0;
right: 0;
}
.test_radio:checked~.test_label {
background-color: #fff;
border-bottom: 1px solid #fff;
position: relative;
z-index: 1;
}
/* 第二种方式 */
/* .tabs {
position: relative;
min-height: 200px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0px;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
}
[type=radio]:checked~label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked~label~.content {
z-index: 1;
} */
</style>
</head>
<body>
<div class="test_box">
<div class="test_tab">
<input type="radio" id="testTabRadio1" class="test_radio" name="tab" checked="checked" />
<label class="test_label" for="testTabRadio1">选项卡1</label>
<div class="test_tab_content">
<p>我是选项卡1对应的美女</p>
<img src="//image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
</div>
</div>
<div class="test_tab">
<input type="radio" id="testTabRadio2" class="test_radio" name="tab" />
<label class="test_label" for="testTabRadio2">选项卡2</label>
<div class="test_tab_content">
<p>我是选项卡2对应的美女</p>
<img src="//image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />
</div>
</div>
<div class="test_tab">
<input type="radio" id="testTabRadio3" class="test_radio" name="tab" />
<label class="test_label" for="testTabRadio3">选项卡3</label>
<div class="test_tab_content">
<p>我是选项卡3对应的美女</p>
<img src="//image.zhangxinxu.com/image/study/s/s128/mm3.jpg" />
</div>
</div>
</div>
<!-- 第二种方式 -->
<!-- <div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tabsonly">
<label for="">one</label>
<div class="content">
1
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tabsonly" checked>
<label for="">two</label>
<div class="content">
2
</div>
</div>
</div> -->
</body>
</html>