<!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'; } }}
為什么我就是獲取不到ID的索引
qq_我愛勒布朗_0
2018-09-28 16:21:54
