网页切换弹出切换城市层的简单研究
来源：互联网 发布：网络弱点 编辑：程序博客网 时间：2024/05/01 20:28
<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>
