                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /Tab选项卡切换效果

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

function select(id){

return typeof id==="string"?document.getElementById(id):id;

}

window.onload=function(){

var timer =null;

var titles =select("notice-tit").getElementsByTagName("li"),

divs =select("notice-con").getElementsByTagName("div");

if(titles.length!==divs.length){

return;

}

for (var i =0;i<titles.length;i++){

titles[i].index=i;

titles[i].onmouseover=function(){

var that=this;

if (timer){

clearTimeout(timer);

timer=null;

}

timer =setTimeout(function(){

for(var j=0;j<titles.length;j++){

titles[j].className="";

divs[j].style.display="none";

}

that.className="select";

/* titles[that.index].className="select";*/

divs[that.index].style.display="block";

},500);

}

慕粉3274123

2016-07-26

源自：Tab选项卡切换效果 2-1

关注问题我要回答

740

操作

收起

2 回答

慕客学渣会总瓢把子3201537 回答被采纳 +3 积分
2016-07-27

我做了我的可以。你前面既然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)
        }
    }
}