为什么导入延时切换的代码以后网页内容除了标题都不见了？用老师的代码也是这样的。
来源：2-1 js实现延迟切换
慕娘3153766
2017-02-25 10:57
求问大神。其他都很正常，导入其他切换的js代码都非常正常的显示，可是为什么再倒入延时切换的js代码以后，我的css样式就不能正常显示了呢？导入老师延时JS代码也是这样。（只能显示标题，显示不了内容）这是我的js和css代码。实在不知道问题出在了哪里。小白求教。谢谢！
window.onload=function () {
var index=0;
var timer=null;
var list=document.getElementById("title").getElementsByTagName("li");
var divs=document.getElementById("content").getElementsByTagName("div");
if(list.length!=divs.length){
return;
}
for(var i=0;i<list.length;i++){
list[i].id=i;
list.onmouseover=function () {
var that=this;
if(timer){
clearTimeout(timer);
timer=null;
}
timer=window.setTimeout(function () {
for(var j=0;j<list.length;j++){
list[j].className="";
divs.display.style="none";
}
list[that.id].className="select";
divs[that.id].display.style="block";
},500);
}
}
}
css代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tabPrac</title>
<script src="js/tabyanshi.js"></script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
}
.notice{
width: 298px;
height: 98px;
margin: 0 auto;
border: 1px solid #eee;
overflow: hidden;
}
.title{
height: 27px;
position: relative;
background-color: #f7f7f7;
}
.title ul{
position: absolute;
width: 301px;
left: -1px;
}
.title li{
float: left;
width: 58px;
height: 26px;
line-height: 26px;;
overflow: hidden;
text-align: center;
border-bottom: 1px solid #eee;
padding: 0 1px;
}
.title li a{
color: black;
text-decoration: none;
}
.title li.select{
background: white;
border-bottom-color:white;
border-left:1px solid #eee;
border-right:1px solid #eee;
padding: 0px;
font-weight: bold;
}
.title li a:hover{
color: silver;
}
.mod{
margin: 10px 10px 10px 19px;
}
.mod ul li{
float: left;
width: 134px;
height: 25px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="notice" class="notice">
<div id="title" class="title">
<ul>
<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>
</div>
<div id="content" class="content">
<div class="mod" style="display: none">
<ul>
<li><a href="#">孙建华当选呼和</a></li>
<li><a href="#"> 贾英祥不再担任</a></li>
<li><a href="#"> 网络主播直播算命</a></li>
<li><a href="#"> 江西要求全省公车</a></li>
</ul>
</div>
<div class="mod" style="display: none">
<ul>
<li><a href="#">全国第4个省份</a></li>
<li><a href="#"> 法国总理卡泽</a></li>
<li><a href="#"> 武汉一日游都去哪了</a></li>
<li><a href="#"> 湖北评出2016年</a></li>
</ul>
</div>
<div class="mod" style="display: none">
<ul>
<li><a href="#">全省份</a></li>
<li><a href="#"> 首次访华</a></li>
<li><a href="#"> 武汉一日游</a></li>
<li><a href="#"> 湖北评十大科</a></li>
</ul>
</div>
<div class="mod" style="display: none">
<ul>
<li><a href="#">国民党选举杀</a></li>
<li><a href="#"> 女黑马” 洪秀柱</a></li>
<li><a href="#">去年冻结74万个 </a></li>
<li><a href="#"> 2016年度十大科</a></li>
</ul>
</div>
<div class="mod" style="display: none">
<ul>
<li><a href="#">网贷存管指</a></li>
<li><a href="#"> 超九成P2P</a></li>
<li><a href="#">影院放映厅安 </a></li>
<li><a href="#">律师：未侵犯隐私</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
写回答
关注
3回答
-
- 灵感自你
- 2018-07-18 00:37:06
亲我刚了你的代码虽然这么晚了而且时间过了这么久！但还是来回答一下您的问题
开始的时候你所有的内容都隐藏掉了,您应该显示一个
您应该给每一个li添加一个onmouseover事件所以应该写成list[i].onmouseover=function () {//...}是style.display = "block" 而不是display.style = "block"
-
- 幸福一点点
- 2017-02-25 20:09:07
首先你的id命名有问题，开头不能是数字；
其它的，你自己好好整理一下自己的思路吧；多想想多做
-
- 幸福一点点
- 2017-02-25 16:39:38
给你个建议，你这样问问题，几乎不会有人愿意回答的；
你最好把所有的代码都粘贴上，不然还有推算你的div结构和命名，这......，太虐心了
Tab选项卡切换效果
本课程详细介绍网页页面中最流行常用的tab切换效果
65466 学习 · 573 问题
相似问题