<!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'; } }}
添加回答
举报
0/150
提交
取消