Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍如何完美实现 js 选项卡切换效果,通过设置定时器实现延时 0.5s 切换选项卡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
通过设置定时器实现延时 0.5s 切换,一个重要的技巧是定义了一个 that 变量来存放当前指针 this。
之所以不能在这直接引用 this 是因为 setTimeout 是 window 对象,用 this 的话会指向定时器,所以要在前面定义一个变量。
还要注意调用定时器前要判断是否存在准备执行的定时器。
效果如图:
具体代码:
- <!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>
来源: http://www.phperz.com/article/17/0703/326889.html