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

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

< SCRIPT language =javascript > ...
functionswitchinCity()
...{
document.getElementById("site_Nav").style.display="";
document.onclick=hideinCity;

varlia=document.getElementById("site_Nav").getElementsByTagName("li");
for(vari=0;i<lia.length;i++)
...{
lia[i].onmouseover=showCity;
lia[i].onmouseout=showCity;
}
}

functionhideCity()
...{
document.getElementById("site_Nav").style.display="none";
}
functionshowCity()
...{
document.getElementById("site_Nav").style.display="";
}

functionhideinCity(e)...{
varobj=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 >