为什么这里设置（that.className="select";）可以使用反而根据视频教程编写的（ titles[that.index].className="select";），就没反应呢？
慕粉3274123
2016-07-26 17:01
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);
}
}
}
2回答
-
- 慕客学渣会总瓢把子3201537
- 2016-07-27 12:25:04
我做了我的可以。你前面既然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)
}
}
}</script>
</html> -
- 慕客学渣会总瓢把子3201537
- 2016-07-27 11:32:21
我一会做一下试试。
Tab选项卡切换效果
65466 学习 · 575 问题
相似问题