求问大神。其他都很正常,导入其他切换的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>