完美实现js选项卡切换效果(一)     -blog   这篇文章主要为大家详细介绍如何完美实现js选项卡切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js选项卡切换的具体代码，可以手动切换，另设置定时器可使其自动切换，供大家参考，具体内容如下

效果如图：

具体代码：

 !DOCTYPE html 
 html 
 head lang="en" 
 meta charset="UTF-8" 
 title /title 
 /head 
 style type="text/css" 
 margin: 0;
 padding: 0;
 font-size: 12px;
 font-family: "微软雅黑";
 color: #000000;
 text-decoration: none;
 list-style-type: none;
 #tab-list{
 width: 275px;
 height: 190px;
 margin: 30px auto;
 #list{
 height: 32px;
 border-bottom: #8B4513 2px solid;
 #list li{
 display: inline-block;
 width: 60px;
 border: 1px solid #999999;
 border-bottom: none;
 line-height: 30px;
 margin-left: 5px;
 text-align: center;
 cursor: pointer;
 #list .active{
 border-top: 2px solid #8B4513;
 border-bottom: 2px solid #fff;
 #tab-list div{
 border: 1px solid #7396B8;
 border-top: none;
 #tab-list div li{
 height: 30px;
 line-height: 30px;
 text-indent: 8px;
 #tab-list .show{
 display: block;
 #tab-list .hidden{
 display: none;
 /style 
 script type="text/javascript" 
 window.onload=function(){
 var tab=document.getElementById('tab-list');
 var list=document.getElementById('list').getElementsByTagName('li');
 var div=tab.getElementsByTagName('div');
 var timer=null;
 var index=0;
 for(var i=0;i list.length;i++){
 list[i].num=i;
 list[i]. unction(){
 Change(this.num);
 function Change(curIndex){
 for(var i=0;i list.length;i++){
 list[i].className="";
 div[i].className="hidden";
 list[curIndex].className="active";
 div[curIndex].className="show";
 index=curIndex;
 //自动播放
 function autoPlay(){
 timer=setInterval(function(){
 index++;
 if(index list.length - 1){
 index=0;
 Change(index);
 },2000);
 autoPlay();
 tab. unction(){
 clearInterval(timer);
 tab.onmouseout=function(){
 autoPlay();
 /script 
 body 
 div id="tab-list" 
 ul id="list" 
 li 房产 /li li 家居 /li li 二手房 /li 
 /ul 
 div 
 li a href="javascript:;" 275万购昌平邻铁三居 总价20万买一居 /a /li 
 li a href="javascript:;" 200万内购五环三居 140万安家东三环 /a /li 
 li a href="javascript:;" 北京首现零首付楼盘 53万购东5环50平 /a /li 
 li a href="javascript:;" 京楼盘直降5000 中信府 公园楼王现房 /a /li 
 /ul 
 /div 
 div 
 li a href="javascript:;" 40平出租屋大改造 美少女的混搭小窝 /a /li 
 li a href="javascript:;" 经典清新简欧爱家 90平老房焕发新生 /a /li 
 li a href="javascript:;" 新中式的酷色温情 66平撞色活泼家居 /a /li 
 li a href="javascript:;" 瓷砖就像选好老婆 卫生间烟道的设计 /a /li 
 /ul 
 /div 
 div 
 li a href="javascript:;" 通州豪华3居260万 二环稀缺2居250w甩 /a /li 
 li a href="javascript:;" 西3环通透2居290万 130万2居限量抢购 /a /li 
 li a href="javascript:;" 黄城根小学学区仅260万 121平70万抛! /a /li 
 li a href="javascript:;" 独家别墅280万 苏州桥2居优惠价248万 /a /li 
 /ul 
 /div 
 /div 
 /body 
 /html 

如果大家还想深入学习，可以点击两个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。