运行时没有切换效果
慕九州2297532
2020-02-29 22:40
我的index.html这样写
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab切换</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="left" class="left">
<div id="left-title" class="left-title">
<ul>
<li class="select">
<a href="#">选择题</a>
</li>
<li>
<a href="#">填空题</a>
</li>
<li>
<a href="#">选择题</a>
</li>
<li>
<a href="#">选择题</a>
</li>
<li>
<a href="#">选择题</a>
</li>
</ul>
</div>
<div id="left-con" class="left-con">
<div class="mod">
<ul>
<li>一模块
</li>
<li>一模块
</li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li>2模块
</li>
<li>2模块
</li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li>3模块
</li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li>4模块
</li>
</ul>
</div>
<div class="mod" style="display:none">
<ul>
<li>5模块
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
style.css
* {
margin:0;
padding:0;
list-style:none;
font-size:12px;
}
.left{
width:298px;
height:98px;
margin:10px;
border:1px solid #eee;
overflow:hidden;
}
.left-title{
height:27px;
position:relative;
background:#F7F7F7;
}
.left-title ul{
position:absolute;
width:301px;
left:-1px;
}
.left-title li{
float:left;
width:58px;
height:26px;
line-height:26px;
text-align:center;
overflow:hidden;
background:#FFF;
padding:0 1px;
background:#F7F7F7;
border-bottom:1px solid #eee;
}
.left-title li.select{
background:#FFF;
border-bottom-color:#FFF;
border-left:1px solid #eee;
border-right:1px solid #eee;
padding:0;
font-weight:bolder;
}
.left-title li a:link,.left-title li a:visited{
text-decoration:none;
color:#000;
}
.left-title li a:hover{
color:#F90;
}
.left-con .mod{
margin:10px 10px 10px 19px;
}
.left-con .mod ul li{
float:left;
width:134px;
height:25px;
overflow:hidden;
}
script.js
function $(id){
return typeof id==='string'?document.getElementById(id):id;
}
window.onload==function(){
//获取鼠标滑过或点击标签和要切换的内容
var titles=$('left-title').getElementsByTagName('li'),
divs=$('left-con').getElementsByTagName('div');
if(titles.length!=divs.length)
return;
//遍历titles下的所有li
for(var i=0;i<titles.length;i++){
titles[i].id=i;
titles[i].onmouseover=function(){
for(var j=0;j<titles.length;j++){
titles[j].className='';
divs[j].style.display='none';
}
this.className='select';
divs[this.id].style.display='block';
}
}
}
可是运行时没有切换效果
1回答
-
- 慕斯8234454
- 2020-04-28 10:49:07
window.onload=function(){window.onload 后面是一个等于
Tab选项卡切换效果
65465 学习 · 533 问题
相似问题