Tab选项卡切换效果_技术问答

SummerParis

添加定时器: 经测试运行ok，可以直接复制，有问题的话大家可以指出来交流一下。; 2020-08-19 1回答·743浏览

qq_慕容6371432

var timer= null； if(timer){ clearTimeout(timer); timer=null; }: 不是，这句话的意思是当存在这个定时器的时候，就把这个定时器清除掉。具体意思就是，当你的鼠标在一个标题上停留不超过500ms的时候，又停留到了另一个标题上，那么之前标签上的定时执行的内容就会被清除掉，那个标题就不会高亮显示了。你可以把if（timer）换成if（false）试一下，就看出不同了。; 2019-02-27 1回答·1318浏览

慕用5468853

代码和老师打的一样，却报了个错哪位大神帮忙看一下谢谢: 已采纳慕神1472269 的回答; 把第二句括号里面的引号去掉只留id; 2018-09-15 1回答·1234浏览

慕斯2051628

如果con下面有多个div咋让它划过之后继续显示: display:block; 2018-09-04 1回答·1118浏览

慕粉1010304163

代码的在这里的作用

function $(id){ return typeof id==='string'?document.getElementsById(id):id; }

$ 函数名。

id 参数

如果传入的id是字符串类型的。返回 document.getElementById(id)

2017-04-25 2回答·832浏览

慕妹0692581

定时器问题，求大神解答，谢谢！！！: 已采纳薛定谔的量子猫的回答; 因为timer接收到的是setTimeout返回的一个整数类型的值，clearTimeout()是根据这个值去清除计时器，计时器清除后timer变量的值依旧不变，所以最好重新赋值为NULL；setInterval也是同样道理; 2017-04-03 2回答·1730浏览

慕娘3153766

为什么导入延时切换的代码以后网页内容除了标题都不见了？用老师的代码也是这样的。

亲我刚了你的代码虽然这么晚了而且时间过了这么久！但还是来回答一下您的问题

开始的时候你所有的内容都隐藏掉了,您应该显示一个

 您应该给每一个li添加一个onmouseover事件所以应该写成list[i].onmouseover=function () {//...}

是style.display = "block" 而不是display.style = "block"

2017-02-25 3回答·641浏览

mengD

这个关于id的用处

这句话的意思是动态给每个li元素添加id并给每个id增值为i.

比如：给第一个li元素lis[0]加个id="0",给第二个li元素lis[1]加个id="1",以此类推......希望能帮到你！加油！！

2016-12-01 2回答·807浏览

清水3201892

只有当前时间大于500ms时才开始执行？

已采纳小草1434 的回答

首先，制作这个功能就是为了实现延迟的效果（延迟了半秒），不会让鼠标一滑到上面就立即切换

另外，这个时间不一定是500ms，但是500ms是比较好的一个反应时间既不会让用户感觉太慢，也不会太突兀

2016-08-26 3回答·1162浏览

小黍

timer不是在初始化时复制为null了吗: 已采纳 qq_郭祥勤_03578575 的回答; tiemer=setTimeout();这个一定要注意了，这个函数和clearTimeout();一般都是成对出现的，这个计时器不用的时候是最好给他清除的，不然鼠标移动太快会出现问题的，timer开始时为null,后面我们调用了tiemer=setTimeout();这个时候timer就不在是null,也就是说这个计时器被调用了，我们鼠标移动到下一个选项卡时，一定要把之前的计时器删除干净，这个时候只要判断timer不是null了,就把计时器删了就可以了。; 2016-08-25 4回答·1016浏览

吃瓜小夏

Tab选项卡切换延迟效果: 已采纳 mirsent3681149 的回答; 这个没有用的，估计开始的时候准备用Index存取索引值的，也就是后面that=this的时候你可以用:index=this.id来获取索引; 2016-08-03 2回答·1352浏览

慕客学渣会总瓢把子3201537

请大神教一下: 已采纳 _十年一梦的回答; 不加对你的代码也没影响; 2016-07-27 2回答·1058浏览

慕粉3274123

为什么这里设置（that.className="select";）可以使用反而根据视频教程编写的（ titles[that.index].className="select";），就没反应呢？

已采纳慕客学渣会总瓢把子3201537 的回答

我做了我的可以。你前面既然that可以用证明基本上是对的。可能就是一个没注意的地方。F12控制台报错看看是第几行。我的布局和老师的不一样。代码不同。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>tab切换</title>
<style type="text/css">
*{margin: 0px;padding: 0px;list-style:none;font-size: 16px;}
.tab{margin: 50px auto;position: relative;width: 600px;height:98px;overflow: hidden;border: 1px solid #ccc;}

.notice1{width: 600px;height:27px;}
.notice1 li{width: 118px;height: 27px;text-align: center;background: #f7f7f7;float: left;border-bottom: 1px solid #eee;line-height: 27px;padding: 0 1px}
.notice1 li a,.notice2 li a{text-decoration: none;color: #000}
.notice1 .select{background: #fff;border-bottom: 1px solid #fff;border-left: 1px solid #eee;border-right: 1px solid #eee ;padding: 0px 0px;font-weight:bold;}
.notice2 li{float: left;margin:7px 10px;width: 280px;text-align: center;}

</style>
</head>
<body>
    <div id="tab" class="tab">
      <ul id="notice1" class="notice1">
        <li><a href="">公共</a></li>
        <li><a href="">规则</a></li>
        <li><a href="">论坛</a></li>
        <li><a href="">安全</a></li>
        <li class="select"><a href="">公益</a></li>
      </ul>
      <ul class="notice2" style="display:none">
        <li><a href="">公共厕所公关广告公关广告</a></li>
        <li><a href="">公共厕所公关广告公关广告</a></li>
        <li><a href="">公共厕所公关广告公关广告</a></li>
        <li><a href="">公共厕所公关广告公关广告</a></li>
      </ul>
      <ul class="notice2" style="display:none">
        <li><a href="">规则厕所公关广告公关广告</a></li>
        <li><a href="">规则厕所公关广告公关广告</a></li>
        <li><a href="">规则厕所公关广告公关广告</a></li>
        <li><a href="">规则厕所公关广告公关广告</a></li>
      </ul>
      <ul class="notice2" style="display:none">
        <li><a href="">论坛厕所公关广告公关广告</a></li>
        <li><a href="">论坛厕所公关广告公关广告</a></li>
        <li><a href="">论坛厕所公关广告公关广告</a></li>
        <li><a href="">论坛厕所公关广告公关广告</a></li>
      </ul>
      <ul class="notice2" style="display:none">
        <li><a href="">安全厕所公关广告公关广告</a></li>
        <li><a href="">安全厕所公关广告公关广告</a></li>
        <li><a href="">安全厕所公关广告公关广告</a></li>
        <li><a href="">安全厕所公关广告公关广告</a></li>
      </ul>
      <ul class="notice2" style="display:block">
        <li><a href="">难难厕所公关广告公关广告</a></li>
        <li><a href="">难难厕所公关广告公关广告</a></li>
        <li><a href="">难难厕所公关广告公关广告</a></li>
        <li><a href="">难难厕所公关广告公关广告</a></li>
      </ul>
    </div>
</body>
<script type="text/javascript" >
window.onload=function(){
    var timer=null;

    var onotice1 = document.getElementById("notice1");
    var oli = onotice1.getElementsByTagName("li");
    var otab = document.getElementById("tab");
    var oul = otab.getElementsByTagName("ul");

    for (var i = 0;i<oli.length; i++) {
        oli[i].index=i+1;

        oli[i].onmouseover=function(){
          var that=this
          clearTimeout(timer);

          timer=setTimeout(function(){
            for (var j= 0; j<oli.length; j++) {
              oli[j].className="";
              oul[j+1].style.display="none";
            };
            that.className="select";//设置当前鼠标经过的li添加class.
            oul[that.index].style.display="block";
          },500)
        }
    }
}