<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
}
图片效果
前段时间写了个tabs 选项卡切换效果，今天抽空在原有的基础上进行了扩展，加入了自动轮播，这样就变成了类似图片轮播的效果了。html 代码：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>js-tabs</title>
<link rel="stylesheet" type="text/css" href="../css/base.css" media="all"/>
<style type="text/css">
a{color:#a0b3d6}
.tabs{border:1px solid #a0b3d6margin:100pxwidth:300px}
.tabs-nav a{background:#eaf0fdline-height:30pxpadding:0 20pxdisplay:inline-blockborder-right:1px solid #a0b3d6border-bottom:1px solid #a0b3d6float:left}
.tabs-nav .select1,.tabs-nav .select2,.tabs-nav .select3,.tabs-nav .select4{background:whiteborder-bottom:1px solid white_position:relative}
.tabs-content{padding:20pxborder-top:1px solid #a0b3d6margin-top:-1px}
</style>
</head>
<body>
<div class="tabs" id="tabs">
<h2 class="tabs-nav clearfix">
<a href="javascript:">首页</a>
<a href="javascript:">技术</a>
<a href="javascript:">生活</a>
<a href="javascript:">作品</a>
</h2>
<p class="tabs-content">首页首页首页首页首页首页首页首页首页首页</p>
<p class="tabs-content">技术技术技术技术技术技术技术技术技术技术</p>
<p class="tabs-content">生活生活生活生活生活生活生活生活生活生活</p>
<p class="tabs-content">作品作品作品作品作品作品作品作品作品作品</p>
</div>
<br/><br/>
<div class="tabs" id="tabs2">
<h2 class="tabs-nav clearfix">
<a href="javascript:">11111</a>
<a href="javascript:">22222</a>
<a href="javascript:">33333</a>
</h2>
<p class="tabs-content">11111111111111111111111111111111111</p>
<p class="tabs-content ">222222222222222222222222222222222222</p>
<p class="tabs-content ">333333333333333333333333333333333333333</p>
</div>
</body>
</html>
<script type="text/javascript" src="tabs.js"></script>
<script type="text/javascript">
window.onload = function(){
tabs('tabs','click',true,1000)
tabs('tabs2','mouseover')
}
</script>
tabs.js 代码：
function tabs(id,trigger,autoplay,time){
var tabsWrap = document.getElementById(id)
var tabsBtn = tabsWrap.getElementsByTagName('h2').getElementsByTagName('a')
var tabsContent = getClass('tabs-content',tabsWrap)
var timer = null
var current = 0
show(0)
for(var i = 0,len = tabsBtn.lengthi <leni++){
tabsBtn[i].index = i
if(trigger == 'click'){
tabsBtn[i].onclick = function(){
show(this.index)
}
}else if(trigger == 'mouseover'){
tabsBtn[i].onmouseover = function(){
show(this.index)
}
}
}
if(autoplay){
autoPlay()
tabsWrap.onmouseover = function(){
clearInterval(timer)
}
tabsWrap.onmouseout = function(){
autoPlay()
}
}
function autoPlay(){
timer = setInterval(function(){
show(current)
current++
if(current >= tabsBtn.length){
current = 0
}
},time)
}
function show(n){
current = n
for(var i = 0,len = tabsBtn.lengthi <leni++){
tabsBtn[i].className = ''
tabsContent[i].style.display = 'none'
}
tabsBtn[current].className = 'select' + (current + 1)
tabsContent[current].style.display = 'block'
}
function getClass(classname,obj){
var results = []
var elems = obj.getElementsByTagName('*')
for(var i = 0i <elems.lengthi++){
if(elems[i].className.indexOf(classname) != -1){
results[results.length] = elems[i]
}
}
return results
}
}
它这个是用CSS样式来控制它的，所以当然要编辑CSS了，如果你对CSS一点也不了解，基本上不太好修改。简单办法就是你打开CSS文件，然后找到你要修改的地方，一般都会有以下的东西，然后复制它在CSS里面查看，
或是
类似这样的，
然后你就在CSS文件里面查找xx这个名称，找到以后，一般都会有好几行，其中
width:
代表的是宽度，
height:代表的是高度
color:代表颜色
border:代表的是边框，等，具体的可以查CSS手册。
http://mydown.yesky.com/tests/243/243316.html
到这里下载。若有具体的其它问题，可以问我。
