<!doctype html><html><head> <meta charset="utf-8"> <title>Tab切换</title></head><body><style>*{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::#f00;}.notice-tit ul{position:absolute;width:301px;left:-1px;}.notice-tit li {width:58px;height:26px;padding:0 1px;line-height:26px;text-align:center;border-bottom:1px solid #eee;background:#F7f7f7;float:left;}.notice-tit li.select {padding:0;font-weight::bold;background:#fff;border-bottom-color:#fff;border-left:1px solid #eee;border-right:1px solid #eee;}.notice li a:link,.notice li a:visited {color:#000;}.notice .notice-tit li a:hover {color:#f90;}.notice .notice-con .mod {margin:10px 10px 10px 19px;}.notice .notice-con .mod ul li {width:134px;height:25px;float:left;overflow:hidden;}</style><script>function $(id){ return typeof id==='string'?document.getElementById(id):id;}window.onload=function(){//获取鼠标滑过或点击的标签和要切换内容的元素var titles=$('notice-tit').getElementByTagName('li'), divs=$('notice-con').getElementByTagName('div');if(titles.length!=divs.length)return; //遍历titles下的所有lifor(var i=0;i<titles.length;i++){titles[i].id=i;titles[i].onmouseover=function(){//清除所有li上的classfor(var j=0;j<titles.length;j++){titles[j].className='';divs[j].style.display='none';}//设置当前为高亮显示this.className='select';divs[this.id].style.display='block';}}}</script><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:block"> <ul> <li>测试内容区域</li><li>测试内容区域</li><li>测试内容区域</li><li>测试内容区域</li></ul></div> <div style="display:none"> <ul> <li>测试内容区域</li><li>测试内容区域</li><li>测试内容区域</li><li>测试内容区域</li></ul></div> <div style="display:none"> <ul> <li>测试内容区域</li><li>测试内容区域</li><li>测试内容区域</li><li>测试内容区域</li></ul></div> <div style="display:none"> <ul> <li>测试内容区域</li><li>测试内容区域</li><li>测试内容区域</li><li>测试内容区域</li></ul></div> <div style="display:none"> <ul> <li>测试内容区域</li><li>测试内容区域</li><li>测试内容区域</li><li>测试内容区域</li></ul></div></div></div></body></html>
添加回答
举报
0/150
提交
取消