学习了Tab选项卡，在浏览器里打开才发现，没有鼠标滑动内容区域跟着变动的效果
代码如下往各位麻烦看一下，兄弟到底错在哪里，谢谢啊
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>tab选项卡</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
list-style:none;
font-size:12px;
}
.notice{
width:298px;
height:98px;
margin:10px;
border:1px solid #eee;
overflow:hidden;
}
.notice-tit{
height:27px;
position:relative;
background:#F7F7F7;
}
.notice-tit ul{
position:absolute;
width:301px;
left:-1px;
}
.notice-tit li{
float:left;
width:58px;
height:26px;
line-height:26px;
text-align:center;
overflow:hidden;
background:#e4e4e4;
padding:0 1px;
border-bottom:1px solid #eee;
}
.notice-tit li.select{
background:#FFF;
border-bottom-color:#FFF;
border-left:1px solid #eee;
border-right:1px solid #eee;
padding:0px;
font-weight:bolder;
}
.notice li a:link,.notice li a:visited{text-decoration:none;
color:#000;}
.notice li a:hover{color:#F90;}
.notice-con .mod{margin:10px 10px 10px 19px;}
.notice-con .mod ul li{
float:left;
width:134px;
height:25px;
overflow:hidden;
}
</style>
<script>
function $(id)
{
return typeof id==='string'?document.getElementById(id):id;
}
window.onload=function()
{
var titles=$('notice-tit').getElementsByTayName('li'),
divs=$('notice-con').getElementsByTayName('div');
if(titles.length!=divs.length)
return;
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='black';
}
}
}
</script>
</head>
<body>
<div id="notice">
<div id="notice-tit">
<ul>
<li><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="notice-con">
<div style="display:none;">
<ul>
<li><a href=""@#>
张勇：要玩快乐足球
</a>
</li>
<li><a href=""@#>
阿里2000万驰援灾区
</a>
</li>
<li><a href=""@#>
旅游宝让你边玩边赚钱
</a>
</li>
<li><a href=""@#>
多行跟进阿里信用贷款
</a>
</li>
</ul>
</div>
<div 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 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 style="display:none;">
<ul>
<li><a href=""@#>
张勇要玩快乐足球
</a>
</li>
<li><a href=""@#>
阿里2000万驰援灾区
</a>
</li>
<li><a href=""@#>
宝让你边玩边赚钱
</a>
</li>
<li><a href=""@#>
跟进阿里信用贷款
</a>
</li>
</ul>
</div>
<div style="display:block;">
<ul>
<li><a href=""@#>
走进无声课堂行动
</a>
</li>
<li><a href=""@#>
淘宝之行大众评审赢公益
</a>
</li>
<li><a href=""@#>
爱心品牌联合征集
</a>
</li>
<li><a href=""@#>
名公益机构淘宝开店攻略
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
liubolang20141220回答
随时随地看视频慕课网APP