当前位置: 代码迷 >> JavaScript >> 求高手帮看看,IE上正常,求兼容FF。十分感谢
  详细解决方案

求高手帮看看,IE上正常,求兼容FF。十分感谢

热度:65   发布时间:2012-09-09 09:27:54.0
求高手帮看看,IE下正常,求兼容FF。。。在线等~~十分感谢。
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> 
  相关解决方案