完美实现js选项卡切换效果(二)


Posted in Javascript onMarch 08, 2017

本文实例为大家分享了js选项卡切换的具体代码,供大家参考,具体内容如下

通过设置定时器实现延时0.5s切换,一个重要的技巧是定义了一个that变量来存放当前指针this。

之所以不能在这直接引用this是因为setTimeout是window对象,用this的话会指向定时器,所以要在前面定义一个变量。
还要注意调用定时器前要判断是否存在准备执行的定时器。

效果如图:

完美实现js选项卡切换效果(二)

具体代码:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>延时切换</title>
 <style type="text/css">
  *{margin: 0;padding: 0;font: normal 12px "微软雅黑";color: #000000;}
  ul{list-style-type: none;}
  a{text-decoration: none;}
  #tab-list{width: 275px;height: 190px;margin: 20px auto;}
  #ul1{border-bottom: 2px solid #8B4513;height: 32px;}
  #ul1 li{display: inline-block;width: 60px;line-height: 30px;text-align: center;
   border: 1px solid #999;border-bottom: none;margin-left: 5px;}
  #ul1 li:hover{cursor: pointer;}
  #ul1 li.active{border-top: 2px solid #8B4513;border-bottom: solid 2px #ffffff;}
  #tab-list div{border: 1px solid #7396B8;border-top: none;}
  #tab-list div li{height: 30px;line-height: 30px;text-indent: 8px;}
  .show{display: block;}.hide{display: none;}
 </style>
 <script type="text/javascript">
  window.onload=function(){
   var ul1=document.getElementById('ul1');
   var aLi=ul1.getElementsByTagName('li');
   var oDiv=document.getElementById('tab-list');
   var aDiv=oDiv.getElementsByTagName('div');
   var timer=null;
   for(var i=0;i<=aLi.length;i++){
    aLi[i].id=i;
    aLi[i].onmouseover=function(){
     var that=this;//用that这个变量来引用当前滑过的li
     //如果存在准备执行的定时器,立即清除,只能当前停留时间大于500ms时才开始执行(指鼠标快速滑过一个的那一瞬间要清除掉产生的定时器)
     if(timer){
      clearTimeout(timer);
      timer=null;
     }
     //延时半秒执行
     timer=window.setTimeout(function(){
      for(var i=0;i<aLi.length;i++){
       aLi[i].className="";
       aDiv[i].className="hide";
      }
      that.className="active";//之所以不能在这直接引用this是因为setTimeout是window对象,用this的话会指向定时器,所以要在前面定义一个变量
      aDiv[that.id].className="show";
     },500);
    }
   }
  }
 </script>
</head>
<body>
<div id="tab-list">
 <ul id="ul1">
  <li class="active">房产</li><li>家居</li><li>二手房</li>
 </ul>
 <div>
  <ul>
   <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 class="hide">
  <ul>
   <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 class="hide">
  <ul>
   <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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 Javascript
浅析jquery与checkbox的checked属性的问题
Apr 27 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
微信小程序如何使用云开发
May 17 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 #Javascript
Vue常用指令V-model用法
Mar 08 #Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 #Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 #Javascript
js实现倒计时效果(小于10补零)
Mar 08 #Javascript
详解Vue监听数据变化原理
Mar 08 #Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 #Javascript
You might like
php 正则 过滤html 的超链接
2009/06/02 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
python处理cookie详解
2014/02/07 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
便捷提取python导入包的属性方法
2018/10/15 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
会计自我鉴定范文
2013/10/06 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
服务承诺口号
2014/05/22 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
新农村建设典型材料
2014/05/31 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
社区活动总结
2015/02/04 职场文书
小班教师个人总结
2015/02/05 职场文书
材料采购员岗位职责
2015/04/03 职场文书
python执行js代码的方法
2021/05/13 Python
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android