为什么我就是获取不到ID的索引
<!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="notice" class="notice">
<div id="notice-tit" class="notice-tit">
<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><!-- notice结束 -->
<div id="notice-con" class="notice-con">
<div class="mod" 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><!-- mod结束 -->
<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><!-- mod结束 -->
<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="#">vvvv吧吧吧</a></li>
</ul>
</div><!-- mod结束 -->
<div class="mod" style="display:none ;> <!-- 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><!-- mod结束 -->
<div class="mod" style="display:block ;> <!-- style="display:none隐藏盒子 -->
<ul>
<li><span><a href="#">【公益】11111111</span></a></li>
<li><a href="#">【公益】222222</a></li>
<li><a href="#">【公益】3333333</a></li>
<li><a href="#">【公益】4444444</a></li>
</ul>
</div><!-- mod结束 -->
</div><!-- notice-con结束 -->
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
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:#FFF ;
border-bottom: 1px solid #eee;
padding: 0 1px;
}/* 298除以5=59.6 */
.notice li a:link, .notice li a:visited
{
text-decoration:none ;
color: #000;
}
.notice li a:hover
{
color:#F90 ;
}
.notice-tit li.select{
background: #FFF;
border-bottom-color:#FFF;
border-left: 1px solid #EEE;
border-right: 1px solid #EEE;
padding: 0;
font-weight: bold;
}
.notice-con .mod{
margin: 10px 10px 10px 19px;
}
.notice-con .mod ul li{
float: left;
width: 134px;
height: 25px;
overflow: hidden;
}
function $(id)
{
return typeof id==='string'? document.getElementById(id):$id;
}
window.onload=function()
{
//获取鼠标滑过或点击的标签和内容的元素;1
var titles=$('notice-tit').getElementsByTagName('li'),
divs=$('notice-con').getElementsByTagName('div');
alert(titles.length);
if(titles.length!=divs.length);
return;
// 遍历titles下所有的li
for(var i=0;i<titles.length;i++){
titles[i].id = i;
titles[i].onmouseover=function()
{ //清楚所有li上面的class
for(var j=0;j<titles.length;j++){
titles[j].className=''; //设置当前为高亮显示
}
this.className='select';
divs[this.id].style.display='block';
}
}
}
qq_我爱勒布朗_03回答
-
无所畏惧小小小
恩~先找个bug
随时随地看视频慕课网APP
相关分类
AngularJS