<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">选项卡 1</label>
<div id="tab-content1" class="tab-content">
<p>选项卡内容 1</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">选项卡 2</label>
<div id="tab-content2" class="tab-content">
<p>选项卡内容 2</p>
</div>
</li>
</ul>
CSS样式如下：
* {
margin: 0
padding: 0
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box
}
body {
padding: 20px
text-align: left
font-family: Lato
color: #fff
background: #9b59b6
}
.tabs {
width: 650px
float: none
list-style: none
position: relative
margin: 80px 0 0 10px
text-align: left
}
.tabs li {
float: left
display: block
}
.tabs input[type="radio"] {
position: absolute
top: -9999px
left: -9999px
}
.tabs label {
display: block
padding: 14px 21px
border-radius: 2px 2px 0 0
font-size: 20px
font-weight: normal
text-transform: uppercase
background: #8e44ad
cursor: pointer
position: relative
top: 4px
-webkit-transition: all 0.2s ease-in-out
-moz-transition: all 0.2s ease-in-out
-o-transition: all 0.2s ease-in-out
transition: all 0.2s ease-in-out
}
.tabs label:hover {
background: #703688
}
.tabs .tab-content {
z-index: 2
display: none
overflow: hidden
width: 100%
font-size: 17px
line-height: 25px
padding: 25px
position: absolute
top: 53px
left: 0
background: #612e76
}
.tabs [id^="tab"]:checked + label {
top: 0
padding-top: 17px
background: #612e76
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
display: block
}
图片效果
需要再加上JS进入控制。具体代码如下，JS的功能就是用来修改CSS中的display属性。下面的代码只是做一些简单的原理演示，你可以跟据你自己的需要进行修改。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.tabnav ul{margin:0padding:0list-style:none}
.tabnav li{padding:5 10pxborder:1px solid redfloat:left}
.tabid {border:1px solid #000clear:both}
</style>
<script language='javascript'>
function tab(n){
var tabnav="tab"+n
var tabid="tabid"+n
cleardisplay()
document.getElementById(tabid).style.display="block"
}
function cleardisplay(){
for (i=1i<3i++)
{
var cleartabid="tabid"+i
document.getElementById(cleartabid).style.display="none"
}
}
</script>
</HEAD>
<BODY>
<div>
<div class='tabnav'>
<ul>
<li id='tab1' onclick='tab(1)'>TAB1</li>
<li id='tab2' onclick='tab(2)'>TAB2</li>
</ul>
</div>
<div id='tabid1' class='tabid'>tab1</div>
<div id='tabid2' class='tabid' style='display:none'>tab2</div>
</div>
</BODY>
</HTML>
