基于jQuery实现仿51job城市选择功能实例代码_ 这篇文章主要介绍了基于jQuery实现仿51job城市选择功能实例代码的相关资料,需要的伴侣可以参考下 前些文章用写过，省市县三级联动，但是感觉选择的时候不够直观，现在改进了下，效果如下图 Page LanguageC AutoEventWireuptrue CodeFileCity.aspx.cs InheritsSystem_Select_City DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN l1/DTD/xhtml1-transitional.dtd html xmlnsl head idHead1 runatserver title/title script typetext/javascript src../js/jquery-1.7.min.js /script style typetext/css provinceDiv list-stylenone; provinceDiv li list-stylenone; border-bottom1px dotted ccc; width400px; height20px;margin-bottom3px; provinceDiv li span displayblock; width60px; height20px; floatleft; line-height20px; text-aligncenter; positionrelative; provinceDiv li spanhover backgroundfb0; provinceDiv li span.current backgroundfb0; div.cityDiv border1px solid ccc; widthauto; width100px;_width100px; height100px;_height100px;heightauto; backgroundeff7ff; displaynone; positionabsolute; padding2px; div.cityDiv a displayblock; text-decorationnone; color000; div.cityDiv ahover backgroundfb0; /style script typetext/javascript function var isoncityDiv false; //是否在cityDiv上，默认为false span.bindclick,function var spanid this.attrid; //猎取当前spanid span.not spanid.removeClasscurrent; this.addClasscurrent; div.cityDiv.remove; //立刻移除全部动态创建的div var spanCurrent this.attrid; //当前点击的sapn对象 var tipDiv div idcity_ this.attrid classcityDiv/div; //动态创建城市div tipDiv.htmlSystem_Select_City.GetCityspanid.value;//后台输出的数据包含城市数据 tipDiv.bindmouseover,function tipDiv.show; isoncityDiv true; //鼠标在其上为true .bindmouseout,function tipDiv.hide; ; body.appendtipDiv; //加入body var top spanCurrent.offset.top; //猎取top var left spanCurrent.offset.left; //猎取left tipDiv.offset top top 20,left left 60 ; tipDiv.show; //猎取显示div .bindmouseout,function var spanCurrent city_ this.attrid; var a function if isoncityDiv //不在 弹出的div上时候 执行 spanCurrent.remove; clearTimeoutint; ; var int setTimeouta,3000; ; ; //关闭谈出口 function showtitle parent.closeDivtitle; /script /head body id1 runatserver div ul idprovinceDiv li a直辖市/a/li li span id11北京/span span id31上海/span span id50重庆/span span id12天津/span /li lia省区/a/li li span id13河北/span span id14山西/span span id15内蒙古/span span id21辽宁/span span id22吉林/span span id23黑龙江/span /li li span id32江苏/span span id33浙江/span span id34安徽/span span id35福建/span span id36江西/span span id37山东/span /li li span id41河南/span span id42___/span span id43湖南/span span id44广东/span span id45广西/span span id46海南/span /li li span id51四川/span span id52贵州/span span id53云南/span span id54___/span span id61陕西/span span id62甘肃/span /li li span id63青海/span span id64宁夏/span span id65___/span span id71___/span span id81___/span span id91澳门/span /li /ul /div / /body /html 以上内容给大家介绍了基于jQuery实现仿51job城市选择功能实例代码，盼望对大家有所关心 ...