网页切换弹出切换城市层的简单研究

< html >
< head >
< title > NameTitle </ title >
< META  http-equiv =Content-Type  content ="text/html; charset=gb2312" >
</ head >

< SCRIPT  language =javascript  > ...
function switchinCity()
...{
    document.getElementById("site_Nav").style.display="";
    document.onclick=hideinCity;
        
    var lia=document.getElementById("site_Nav").getElementsByTagName("li");
    for(var i=0;i<lia.length;i++)
    ...{
        lia[i].onmouseover=showCity;
        lia[i].onmouseout=showCity;
    }
}

function hideCity()
...{
    document.getElementById("site_Nav").style.display="none";
}
function showCity()
...{
    document.getElementById("site_Nav").style.display="";
}

function hideinCity(e)...{
    var obj=e?e.target:event.srcElement;
    if(obj.id!="site_Nav"&&obj.id!="switchCitybtn")...{
        document.getElementById("site_Nav").style.display="none";
        document.getElementsByTagName("body")[0].onclick= function()...{};
    }
}
</ SCRIPT >

< body >
< FORM  id =formsearch  name =formsearch  method =get  target =_blank >

< DIV  id =t_sitename > 上海站 
< SPAN  id =switchCitybtn  onmouseover =switchinCity() > [切换城市] </ SPAN >
</ DIV >

< DIV  id =site_Nav  style ="DISPLAY: none"  onmouseout =hideCity() >
< LI  class =l_li >
< SPAN  class =fontred > 上海 </ SPAN > 　 
< A  href ="http://bj.studyget.com/" > 北京 </ A >  　
< A  href ="http://gz.studyget.com/" > 广州 </ A > 　 
< A  href ="http://tj.studyget.com/" > 天　津 </ A > 　 
< A  href ="http://wh.studyget.com/" > 武汉 </ A > 　 
< A  href ="http://sz.studyget.com/" > 深圳 </ A >  
</ LI >

< LI  class =l_li >
< A  href ="http://nj.studyget.com/" > 南京 </ A >  　
< A  href ="http://hz.studyget.com/" > 杭州 </ A >  　
< A  href ="http://xa.studyget.com/" > 西安 </ A >  
< A  href ="http://sjz.studyget.com/" > 石家庄 </ A >  　
< A  href ="http://dl.studyget.com/" > 大连 </ A > 　 
< A  href ="http://jn.studyget.com/" > 济南 </ A >  
</ LI >

< LI  class =l_li >< A  href ="http://cq.studyget.com/" > 重庆 </ A > 　 
< A  href ="http://qd.studyget.com/" > 青岛 </ A >  　
< A  href ="http://cs.studyget.com/" > 长沙 </ A >  
< A  href ="http://hrb.studyget.com/" > 哈尔滨 </ A >  　
< A  href ="http://hf.studyget.com/" > 合肥 </ A >  　
< A  href ="http://sy.studyget.com/" > 沈阳 </ A >  
</ LI >

< LI  class =l_li >
< A  href ="http://cc.studyget.com/" > 长春 </ A >  　
< A  href ="http://zc.studyget.com/" > 郑州 </ A >  　
< A  href ="http://fz.studyget.com/" > 福州 </ A >  
< A  href ="http://nc.studyget.com/" > 南　昌 </ A >  　
< A  href ="http://cd.studyget.com/" > 成都 </ A >  
</ LI >
</ DIV >

</ FORM >
</ body >
</ html >