不废话直接上代码
<!DOCTYPE HTML><!--声明HTML文件-->
<html><!--根标签,网页的开始-->
<head><!--给浏览器看的信息-->
<title>please enter your title</title>
<meta charset="utf-8"><!--编码格式为国际编码UTF-8-->
<meta name="description" content=""><!--对网页的描述,给搜索引擎抓取-->
<meta name="keywords" content=""><!--为搜索引擎提供关键字列表-->
<style type='text/css'>
*{ margin:0; padding:0;font-family:'Microsoft yahei';}
.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;
}
</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="http://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="http://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="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg" />
</div>
</div>
</div>
</body>
</html><!--网页的结束-->