js选项卡代码带上一个和下一个选项卡代码
js选项卡代码带上一个和下一个选项卡代码
带自己切换的js选项卡代码: 查看实例
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js选项卡带上一个和下一个动作代码——35ui.cn</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-size:12px;
line-height:22px;
}
ul, li {
list-style:none;
}
#box {
width:400px;
height:500px;
background:#CCC;
}
.tab {
}
.tab li {
width:100px;
font-size:14px;
height:25px;
line-height:25px;
text-align:center;
border:1px solid #999;
background:#CCC;
float:left;
margin:100px 0 0 10px;
cursor:pointer;
}
.tab li.active {
background:#f60;
color:#fff;
font-weight:bold;
}
#content {
clear:both;
padding:50px 0 0 100px;
}
#content li {
display:none;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var oBox=document.getElementById('box')
var oTab=document.getElementById('tab')
var aTabli=oTab.getElementsByTagName('li')
var oCon=document.getElementById('content')
var aConli=oCon.getElementsByTagName('li')
var aA=document.getElementsByTagName('a')
var i=0;
var timer=null;
var iNow=0;
for(i=0;i<aTabli.length;i++)
{
aTabli[i].index=i;
aTabli[i].onclick=function()
{
iNow=this.index;
tab();
}
}
function tab()
{
for(i=0;i<aTabli.length;i++)
{
aTabli[i].className=''
aConli[i].style.display='none'
}
aTabli[iNow].className='active'
aConli[iNow].style.display='block'
}
function next()
{
iNow++
if(iNow==aTabli.length)
{
iNow=0;
}
tab();
}
timer=setInterval(next,1000)
oBox.onmouseover=function()
{
clearInterval(timer)
};
oBox.onmouseout=function()
{
timer=setInterval(next,1000)
};
aA[1].onclick=function()//下一个
{
iNow++;
if(iNow==aTabli.length)
{
iNow=0;
}
tab();
}
aA[0].onclick=function()//上一个
{
iNow--;
if(iNow==-1)
{
iNow=aTabli.length-1;
}
tab();
}
}
</script>
</head>
<body>
<div id="box"> <a style="padding:0 40px 0 130px;" href="#">上一个</a> <a href="#">下一个</a>
<ul class="tab" id="tab">
<li class="active">标题1</li>
<li>标题2</li>
<li>标题3</li>
</ul>
<div style="clear:both;"></div>
<ul id="content">
<li style="display:block;">对应标题111111</li>
<li>对应标题222222</li>
<li>对应标题33333</li>
</ul>
<div style="clear:both;"></div>
</div>
</body>
</html>
