- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <SCRIPT> var SwapID=0; var PauseTime=15*1000; var Timer1; function swap(Obj) {var st = document.getElementsByName('lt2'); var j; if(st.length>0) {for(j=0; j<st.length; j++) {if(st[j]==Obj) {lt2[j].style.display=''; //mt[j].style.background='url(images/lb1.gif)';#C8D5DD; //mt[j].style.background='#F2F7FD'; mt[j].style.background='#ADC1DA' mt[j].style.color='#FFFFFF'} else {lt2[j].style.display='none'; mt[j].style.background='#FFFFFF'; mt[j].style.color='#333333'}}}} function AutoSwap() {//StopSwap();Swap(lt[SwapID]) for (i=0;i<2;i++) Swap(lt[i]); //SwapID+=1; //if (SwapID==3) { SwapID=1; } Timer1=setTimeout("AutoSwap()",PauseTime);} function StopSwap() {clearTimeout(Timer1);} </SCRIPT> </head> <BODY> <DIV id=all> <DIV id=ppyule></DIV> <!--子菜单--> <!--正文开始,相关内容--> <DIV id=ppyule> <DIV id=left_top> <DIV id=caidans> <DIV style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px"> <SPAN id=mt onmouseover=swap(lt2[0]); style="BACKGROUND: #adc1da; COLOR: #ffffff">2完成计划</SPAN> <SPAN id=mt onmouseover=swap(lt2[1]);>待完成计划</SPAN> <DIV id=lt2><ul><li>已完成计划</li><li>已完成计划</li><li>已完成计划</li></ul></DIV> <DIV id=lt2 style="DISPLAY: none"><ul><li>待完成计划</li><li>待完成计划</li><li>待完成计划</li></ul></DIV> </DIV> </DIV> </DIV> </DIV> </DIV> </BODY></HTML>
------解决方案--------------------
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #menu li { display:inline; } #content ul { display:none; } </style> <script type="text/javascript"> var objLI, objUL; function show(id) { for (var i = 0; i < objLI.length; i ++) { if (i == id) { objLI[i].style.color = '#FFF'; objLI[i].style.backgroundColor = '#ADC1DA'; objUL[i].style.display = 'block'; } else { objLI[i].style.color = '#333'; objLI[i].style.backgroundColor = '#FFF'; objUL[i].style.display = 'none'; } } } window.onload = function () { objLI = document.getElementById('menu').getElementsByTagName('li'); objUL = document.getElementById('content').getElementsByTagName('ul'); show(0); for (var i = 0; i < objLI.length; i ++) { objLI[i].idx = i; objLI[i].onmouseover = function() { show(this.idx); } } } </script> </head> <body> <ul id="menu"> <li>已完成计划</li> <li>待完成计划</li> </ul> <div id="content"> <ul> <li>已完成计划1</li> <li>已完成计划2</li> <li>已完成计划3</li> </ul> <ul> <li>待完成计划1</li> <li>待完成计划2</li> <li>待完成计划3</li> </ul> </div> </body> </html>