首页 > 前端特效js代码大全 > js选项卡代码带上一个和下一个选项卡代码

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>

原文地址:http://www.35ui.cn/post/201101027593.html

标签js选项卡代码做网页常用代码

上一条: 选项卡自动切换代码|自动轮播js源码
下一条: div层页面居中css代码|css页面居中代码

  • 作品
  • 素材
  • ued
  • 资源
  • 前端工程师
  • Asp网页培训班
  • jquery培训班
  • 北京网站制作
  • logo设计培训班
  • 做网站常用代码