<!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(){//獲取鼠標滑過或點擊的標簽和要切換內(nèi)容的元素var titles=$('notice-tit').getElementByTagName('li'),? ?divs=$('notice-con').getElementByTagName('div');if(titles.length!=divs.length)return;? ? //遍歷titles下的所有l(wèi)ifor(var i=0;i<titles.length;i++){titles[i].id=i;titles[i].onmouseover=function(){//清除所有l(wèi)i上的classfor(var j=0;j<titles.length;j++){titles[j].className='';divs[j].style.display='none';}//設(shè)置當前為高亮顯示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="#">規(guī)則</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>測試內(nèi)容區(qū)域</li><li>測試內(nèi)容區(qū)域</li><li>測試內(nèi)容區(qū)域</li><li>測試內(nèi)容區(qū)域</li></ul></div>? ?<div style="display:none">? ?<ul>? ?<li>測試內(nèi)容區(qū)域</li><li>測試內(nèi)容區(qū)域</li><li>測試內(nèi)容區(qū)域</li><li>測試內(nèi)容區(qū)域</li></ul></div>? ?<div style="display:none">? ?<ul>? ?<li>測試內(nèi)容區(qū)域</li><li>測試內(nèi)容區(qū)域</li><li>測試內(nèi)容區(qū)域</li><li>測試內(nèi)容區(qū)域</li></ul></div>? ?<div style="display:none">? ?<ul>? ?<li>測試內(nèi)容區(qū)域</li><li>測試內(nèi)容區(qū)域</li><li>測試內(nèi)容區(qū)域</li><li>測試內(nèi)容區(qū)域</li></ul></div>? ?<div style="display:none">? ?<ul>? ?<li>測試內(nèi)容區(qū)域</li><li>測試內(nèi)容區(qū)域</li><li>測試內(nèi)容區(qū)域</li><li>測試內(nèi)容區(qū)域</li></ul></div></div></div></body></html>
tab標簽切換 問題出在哪里 求助
冰封de蠶
2015-11-30 15:12:36