運行時沒有切換效果
我的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';
??}
?}
}
可是運行時沒有切換效果
2020-04-28
window.onload=function(){window.onload?后面是一個等于