仿51job弹出层城市选择代码.zip资源-CSDN文库

共9个文件

gif：5个

js：1个

css：1个

版权申诉

html5

jQuery

javascript

78 浏览量 2022-11-25 10:22:14 上传评论收藏 90KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

仿51job弹出层城市选择代码.zip （9个子文件）

仿51job弹出层城市选择代码

jiaoben3704

css

style.css 2KB

images

line.gif 1KB

selean.gif 2KB

icon01.gif 2KB

bg02.gif 1KB

bg01.gif 1KB

index.html 6KB

jquery-1.5.1.min.js 84KB

仿51job弹出层城市选择代码.jpg 66KB

<!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>仿51job弹出层城市选择代码 - 网页模板</title> <link rel="stylesheet" href="css/style.css" type="text/css" /> <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> <script type="text/javascript"> var cityId = 0; $(function(){ $('.acity').click(function(){ $('.city').show(); $('.mask').show(); }); $('.cityul b').click(function(){ var test=$(this).html(); if($(this).attr("city") == undefined){ $(this).attr("city", window.cityId++);} var city = $(this).attr("city"); if( $('input[city="'+ city +'"]').size()){ $('input[city="'+ city +'"]').parent().remove(); } else { var ml=$('.cityshow li').length; if(ml>4){ alert('最多只能添加5个'); }else{ var test=$(this).html(); $('<li class="licity"><input name="citychk" type="checkbox" checked="true" city="'+ city +'" class="check">'+test+'</li>').appendTo('.cityshow ul'); } } $('input[name=citychk]').click(function(){ $(this).parent('.licity').remove(); }); }); $('.ok').click(function(){ var total=""; if($('.cityshow ul li').text()=='') { $('.city').hide(); $('.mask').hide(); }else{ $('.cityshow ul li').each(function(){ total += (total.length > 0 ? "+" : "" ) + $(this).text(); }); $('.acity').text(total); $('.city').hide(); $('.mask').hide(); } }) }) </script> </head> <BODY> <div class="mask"></div> 请选择城市 <div id="wrap"> <div class="city"> <div class="top01-city" > 确定请选择工作地点（最多五项） </div> <div class="mid01-city"> <div class="cityshow" id="show"> 已选地点: <ul></ul> </div> <div class="cityshow1" id="show1"> <table> <tr><td colspan="2">主要城市:</td></tr> <tr><td> <ul class="cityul"> <li>A <a >鞍山</a> </li> <li>B <a >北京</a> <a >包头</a> <a>保定</a></li> <li>C <a >长春</a> <a>长沙</a> <a>成都</a> <a>重庆</a> <a>常州</a> <a>常德</a> <a>常熟</a> </li> <li>D <a >大连</a> <a><a>东莞</a> <a><a>丹东</a> <a><a>大庆</a> </li> <li>E <a >鄂尔多斯</a> </li> <li>F <a >福州</a> <a><a>佛山</a> <a><a>抚顺</a> </li> <li>G <a >广州</a> <a><a>贵阳</a> <a><a>赣州</a> </li> <li>H <a >哈尔滨</a> <a><a>杭州</a> <a><a>合肥</a> <a>海口</a> <a>呼和浩特</a> </li> <li>J <a >济南</a> <a><a>嘉兴</a> <a><a>金华</a> <a>吉林</a> <a>江门</a> <a>荆州</a> </li> <li>K <a >昆明</a> <a><a>昆山</a> </li> </ul> </td> <td><ul class="cityul"> <li>L <a >兰州</a> <a >廊坊</a> <a >临沂</a> <a >洛阳</a> <a >连云港</a> <a >柳州</a> </li> <li>M <a >绵阳</a> </li> <li>N <a >南京</a> <a>宁波</a> <a>南昌</a> <a>南通</a> <a>南宁</a> </li> <li>Q <a >青岛</a> <a><a>泉州</a> <a><a>秦皇岛</a> <a><a>清远</a> </li> <li>S <a >上海</a> <a >深圳</a> <a >沈阳</a> <a >石家庄</a> <a >苏州</a> <a >三亚</a> <a >绍兴</a> </li> <li>T <a >天津</a> <a><a>太原</a> <a><a>台州</a> <a><a>唐山</a> <a><a>泰州</a> <a><a>铁岭</a> </li> <li>W <a >武汉</a> <a>无锡</a> <a>温州</a> <a>乌鲁木齐</a> <a>芜湖</a> <a>潍坊</a> <a>威海</a> </li> <li>X <a>西安</a> <a>厦门</a> <a>徐州</a> <a>襄阳</a> <a>湘潭</a> <a>咸阳</a> </li> <li>Y <a >烟台</a> <a><a>扬州</a> <a><a>宜昌</a> <a>盐城</a> <a>义乌</a> <a>营口</a> <a>银川</a> </li> <li>Z <a >漳州</a> <a>郑州</a> <a>中山</a> <a>珠海</a> <a>镇江</a> <a>株洲</a> <a>湛江</a> </li> </ul></td> </tr> </table> </div> </div> </div> </div> <script> </script> <style> a:hover{ background-color: #ffa22e; color: #ffffff; text-decoration:none;; } .citychk{ background-color: #ffa22e; color: #ffffff; } </style> <div style="text-align:center;margin:-50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> 适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a> </div> </BODY> </HTML>

评论收藏

内容反馈

版权申诉