//项目需求：移动端选择城市，使用zepto实现，zepto近似jquery,非常简单方便；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>Select a place to get off</title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> <link rel="stylesheet" href="css/Select a place to get off.css" /> <link rel="stylesheet" href="css/Select a place to get off2.css" /> <script type="text/javascript" charset="utf-8"> mui.init(); </script> </head> <body> <!--标题--> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">选择下车地点</h1> </header> <!--内容--> <div class="mui-content loan_jm1"> <!--输入城市名称 begin--> <div class="search"> <input class="mui-input input-city" type="text" placeholder="请输入城市名称" style="width: 112px;"/> <span class="breakLine">|</span> <input class="mui-input input-city" type="text" placeholder="你想去哪儿?" style="width: 140px;"/> </div> <!--输入城市名称 end--> <!--城市列表 begin--> <!--<div class="mui-indexed-list-inner">--> <div class="posiCity"> <span ></b></span> </div> <div class="container" style="z-index: 9999; "> <div class="city"> <div class="city-list"><span class="city-letter" >A</span> <p data->鞍山市</p> <p data->阿拉善盟</p> <p data->安庆市</p> <p data->安阳市</p> <p data->阿里地区</p> <p data->安康市</p> <p data->安顺市</p> <p data->阿坝藏族羌族自治州</p> <p data->阿拉尔市</p> <p data->阿克苏地区</p> <p data->澳门特别行政区</p> <p data->阿勒泰地区</p> </div> <div class="city-list"><span class="city-letter" >B</span> <p data->白城市</p> <p data->包头市</p> <p data->巴彦淖尔市</p> <p data->保定市</p> <p data->本溪市</p> <p data->白山市</p> <p data->亳州市</p> <p data->蚌埠市</p> <p data->滨州市</p> <p data->白银市</p> <p data->宝鸡市</p> <p data->保山市</p> <p data->白沙黎族自治县</p> <p data->百色市</p> <p data->毕节市</p> <p data->北海市</p> <p data->巴中市</p> <p data->保亭黎族苗族自治县</p> <p data->巴音郭楞蒙古自治州</p> <p data->博尔塔拉蒙古自治州</p> <p data->北京市</p> </div> <div class="city-list"><span class="city-letter" >C</span> <p data->长治市</p> <p data->沧州市</p> <p data->常州市</p> <p data->慈溪市</p> <p data->常熟市</p> <p data->承德市</p> <p data->赤峰市</p> <p data->长春市</p> <p data->郴州市</p> <p data->长沙市</p> <p data->滁州市</p> <p data->常德市</p> <p data->巢湖市</p> <p data->池州市</p> <p data->澄迈县</p> <p data->崇左市</p> <p data->昌江黎族自治县</p> <p data->楚雄彝族自治州</p> <p data->潮州市</p> <p data->重庆市</p> <p data->成都市</p> <p data->昌都地区</p> <p data->昌吉回族自治州</p> </div> <div class="city-list"><span class="city-letter" >D</span> <p data->大兴安岭地区</p> <p data->大同市</p> <p data->大庆市</p> <p data->丹阳市</p> <p data->大连市</p> <p data->丹东市</p> <p data->东营市</p> <p data->德州市</p> <p data->达州市</p> <p data->大理白族自治州</p> <p data->儋州市</p> <p data->定安县</p> <p data->迪庆藏族自治州</p> <p data->德阳市</p> <p data->东方市</p> <p data->德宏傣族景颇族自治州</p> <p data->东莞市</p> <p data->定西市</p> </div> <div class="city-list"><span class="city-letter" >E</span> <p data->鄂尔多斯市</p> <p data->鄂州市</p> <p data->恩施土家族苗族自治州</p> </div> <div class="city-list"><span class="city-letter" >F</span> <p data->阜新市</p> <p data->抚顺市</p> <p data->福清市</p> <p data->阜阳市</p> <p data->肥城市</p> <p data->抚州市</p> <p data->福州市</p> <p data->佛山市</p> <p data->防城港市</p> </div> <div class="city-list"><span class="city-letter" >G</span> <p data->广州市</p> <p data->赣州市</p> <p data->广元市</p> <p data->广安市</p> <p data->桂林市</p> <p data->贵港市</p> <p data->贵阳市</p> <p data->甘孜藏族自治州</p> <p data->甘南藏族自治州</p> <p data->固原市</p> <p data->果洛藏族自治州</p> </div> <div class="city-list"><span class="city-letter" >H</span> <p data->黑河市</p> <p data->葫芦岛市</p> <p data->海宁市</p> <p data->淮安市</p> <p data->衡水市</p> <p data->呼和浩特市</p> <p data->湖州市</p> <p data->鹤岗市</p> <p data->呼伦贝尔市</p> <p data->哈尔滨市</p> <p data->邯郸市</p> <p data->杭州市</p> <p data->鹤壁市</p> <p data->菏泽市</p> <p data->黄石市</p> <p data->怀化市</p> <p data->淮北市</p> <p data->黄冈市</p> <p data->衡阳市</p> <p data->合肥市</p> <p data->淮南市</p> <p data->黄山市</p> <p data->河池市</p> <p data->海口市</p> <p data->河源市</p> <p data->红河哈尼族彝族自治州</p> <p data->惠州市</p> <p data->汉中市</p> <p data->贺州市</p> <p data->海西蒙古族藏族自治州</p> <p data->海东市</p> <p data->黄南藏族自治州</p> <p data->哈密地区</p> <p data->海北藏族自治州</p> <p data->和田地区</p> <p data->海南藏族自治州</p> </div> <div class="city-list"><span class="city-letter" >J</span> <p data->锦州市</p> <p data->金华市</p> <p data->晋中市</p> <p data->江阴市</p> <p data->吉林市</p> <p data->佳木斯市</p> <p data->鸡西市</p> <p data->嘉兴市</p> <p data->晋城市</p> <p data->晋江市</p> <p data->即墨市</p> <p data->吉安市</p> <p data->济南市</p> <p data->荆门市</p> <p data->焦作市</p> <p data->济宁市</p> <p data->济源市</p> <p data->荆州市</p> <p data->九江市</p> <p data->景德镇市</p> <p data->揭阳市</p> <p data->金昌市</p> <p data->江门市</p> <p data->嘉峪关市</p> <p data->酒泉市</p> </div> <div class="city-list"><span class="city-letter" >K</span> <p data->昆山市</p> <p data->开封市</p> <p data->昆明市</p> <p data->克拉玛依市</p> <p data->克孜勒苏柯尔克孜自治州</p> <p data->喀什地区</p> </div> <div class="city-list"><span class="city-letter" >L</span> <p data->临汾市</p> <p data->廊坊市</p> <p data->辽阳市</p> <p data->辽源市</p> <p data->吕梁市</p> <p data->连云港市</p> <p data->莱芜市</p> <p data->漯河市</p> <p data->丽水市</p> <p data->六安市</p> <p data->娄底市</p> <p data->龙岩市</p> <p data->龙口市</p> <p data->临沂市</p> <p data->洛阳市</p> <p data->聊城市</p> <p data->丽江市</p> <p data->来宾市</p> <p data->泸州市</p> <p data->临沧市</p> <p data->乐东黎族自治县</p> <p data->乐山市</p> <p data->兰州市</p> <p data->柳州市</p> <p data->凉山彝族自治州</p> <p data->陵水黎族自治县</p> <p data->林芝地区</p> <p data->临高县</p> <p data->拉萨市</p> <p data->六盘水市</p> <p data->陇南市</p> <p data->临夏回族自治州</p> </div> <div class="city-list"><span class="city-letter" >M</span> <p data->牡丹江市</p> <p data->马鞍山市</p> <p data->绵阳市</p> <p data->眉山市</p> <p data->茂名市</p> <p data->梅州市</p> </div> <div class="city-list"><span class="city-letter" >N</span> <p data->南京市</p> <p data->宁波市</p> <p data->南通市</p> <p data->南昌市</p> <p data->南阳市</p> <p data->南平市</p> <p data->宁德市</p> <p data->南安市</p> <p data->那曲地区</p> <p data->南宁市</p> <p data->南充市</p> <p data->内江市</p> <p data->怒江傈僳族自治州</p> </div> <div class="city-list"><span class="city-letter" >P</span> <p data->盘锦市</p> <p data->萍乡市</p> <p data->平顶山市</p> <p data->濮阳市</p> <p data->莆田市</p> <p data->攀枝花市</p> <p data->普洱市</p> <p data->平凉市</p> </div> <div class="city-list"><span class="city-letter" >Q</span> <p data->秦皇岛市</p> <p data->齐齐哈尔市</p> <p data->七台河市</p> <p data->泉州市</p> <p data->潜江市</p> <p data->青岛市</p> <p data->衢州市</p> <p data->清远市</p> <p data->黔南布依族苗族自治州</p> <p data->钦州市</p> <p data->曲靖市</p> <p data->黔西南布依族苗族自治州</p> <p data->庆阳市</p> <p data->黔东南苗族侗族自治州</p> <p data->琼海市</p> <p data->琼中黎族苗族自治县</p> </div> <div class="city-list"><span class="city-letter" >R</span> <p data->如皋市</p> <p data->荣成市</p> <p data->日照市</p> <p data->日喀则市</p> </div> <div class="city-list"><span class="city-letter" >S</span> <p data->四平市</p> <p data->绥化市</p> <p data->松原市</p> <p data->苏州市</p> <p data->上海市</p> <p data->宿迁市</p> <p data->绍兴市</p> <p data->朔州市</p> <p data->双鸭山市</p> <p data->沈阳市</p> <p data->上虞市</p> <p data->石家庄市</p> <p data->汕头市</p> <p data->三明市</p> <p data->神农架林区</p> <p data->上饶市</p> <p data->商丘市</p> <p data->随州市</p> <p data->宿州市</p> <p data->三门峡市</p> <p data->十堰市</p> <p data->深圳市</p> <p data->邵阳市</p> <p data->韶关市</p> <p data->汕尾市</p> <p data->遂宁市</p> <p data->商洛市</p> <p data->山南地区</p> <p data->三亚市</p> <p data->石嘴山市</p> <p data->石河子市</p> </div> <div class="city-list"><span class="city-letter" >T</span> <p data->太原市</p> <p data->铁岭市</p> <p data->通化市</p> <p data->唐山市</p> <p data->太仓市</p> <p data->天津市</p> <p data->泰州市</p> <p data->通辽市</p> <p data->台州市</p> <p data->泰安市</p> <p data->天门市</p> <p data->铜陵市</p> <p data->铜仁市</p> <p data->屯昌县</p> <p data->铜川市</p> <p data->天水市</p> <p data->塔城地区</p> <p data->图木舒克市</p> <p data->吐鲁番地区</p> <p data->台湾</p> </div> <div class="city-list"><span class="city-letter" >W</span> <p data->温州市</p> <p data->无锡市</p> <p data->乌兰察布市</p> <p data->乌海市</p> <p data->芜湖市</p> <p data->武汉市</p> <p data->潍坊市</p> <p data->威海市</p> <p data->万宁市</p> <p data->渭南市</p> <p data->文昌市</p> <p data->五指山市</p> <p data->武威市</p> <p data->梧州市</p> <p data->文山壮族苗族自治州</p> <p data->五家渠市</p> <p data->吴忠市</p> <p data->乌鲁木齐市</p> </div> <div class="city-list"><span class="city-letter" >X</span> <p data->忻州市</p> <p data->锡林郭勒盟</p> <p data->邢台市</p> <p data->兴安盟</p> <p data->徐州市</p> <p data->新乡市</p> <p data->襄阳市</p> <p data->新余市</p> <p data->信阳市</p> <p data->仙桃市</p> <p data->许昌市</p> <p data->湘潭市</p> <p data->厦门市</p> <p data->宣城市</p> <p data->孝感市</p> <p data->咸宁市</p> <p data->湘西土家族苗族自治州</p> <p data->西安市</p> <p data->咸阳市</p> <p data->西双版纳傣族自治州</p> <p data->西宁市</p> <p data->香港特别行政区</p> </div> <div class="city-list"><span class="city-letter" >Y</span> <p data->宜兴市</p> <p data->延边朝鲜族自治州</p> <p data->扬州市</p> <p data->运城市</p> <p data->盐城市</p> <p data->阳泉市</p> <p data->余姚市</p> <p data->伊春市</p> <p data->营口市</p> <p data->烟台市</p> <p data->宜昌市</p> <p data->岳阳市</p> <p data->宜春市</p> <p data->益阳市</p> <p data->义乌市</p> <p data->鹰潭市</p> <p data->永州市</p> <p data->玉林市</p> <p data->雅安市</p> <p data->玉溪市</p> <p data->阳江市</p> <p data->榆林市</p> <p data->宜宾市</p> <p data->云浮市</p> <p data->延安市</p> <p data->伊犁哈萨克自治州</p> <p data->银川市</p> <p data->玉树藏族自治州</p> </div> <div class="city-list"><span class="city-letter" >Z</span> <p data->张家口市</p> <p data->诸暨市</p> <p data->镇江市</p> <p data->张家港市</p> <p data->朝阳市</p> <p data->张家界市</p> <p data->郑州市</p> <p data->枣庄市</p> <p data->舟山市</p> <p data->增城市</p> <p data->珠海市</p> <p data->周口市</p> <p data->淄博市</p> <p data->株洲市</p> <p data->漳州市</p> <p data->驻马店市</p> <p data->湛江市</p> <p data->遵义市</p> <p data->自贡市</p> <p data->昭通市</p> <p data->肇庆市</p> <p data->中山市</p> <p data->张掖市</p> <p data->资阳市</p> <p data->中卫市</p> </div> </div> </div> <!--城市列表 end--> <!--侧边字母--> <div class="letter"> <ul> <li><a href="javascript:;">A</a></li> <li><a href="javascript:;">B</a></li> <li><a href="javascript:;">C</a></li> <li><a href="javascript:;">D</a></li> <li><a href="javascript:;">E</a></li> <li><a href="javascript:;">F</a></li> <li><a href="javascript:;">G</a></li> <li><a href="javascript:;">H</a></li> <li><a href="javascript:;">J</a></li> <li><a href="javascript:;">K</a></li> <li><a href="javascript:;">L</a></li> <li><a href="javascript:;">M</a></li> <li><a href="javascript:;">N</a></li> <li><a href="javascript:;">P</a></li> <li><a href="javascript:;">Q</a></li> <li><a href="javascript:;">R</a></li> <li><a href="javascript:;">S</a></li> <li><a href="javascript:;">T</a></li> <li><a href="javascript:;">W</a></li> <li><a href="javascript:;">X</a></li> <li><a href="javascript:;">Y</a></li> <li><a href="javascript:;">Z</a></li> </ul> </div> <script type="text/javascript" src="js/zepto.js" ></script> <script type="text/javascript"> //加载城市事件 $('.container').show(); //选择城市 start $('body').on('click', '.city-list p', function () { var type = $('.container').data('type'); $('#zone_ids').html($(this).html()).attr('data-id', $(this).attr('data-id')); $('#gr_zone_ids').html($(this).html()).attr('data-id', $(this).attr('data-id')); $(window).scrollTop($('.loan_jm1').offset().top); }); $('body').on('click', '.letter a', function () { var s = $(this).html(); $(window).scrollTop($('#' + s + '1').offset().top); }); </script> </body> </html>
项目需求：移动端选择城市，使用zepto实现，zepto近似jquery,非常简单方便；
项目需求：移动端选择城市，使用zepto实现，zepto近似jquery,非常简单方便；
项目需求：移动端选择城市，使用zepto实现，zepto近似jquery,非常简单方便；
项目需求：移动端选择城市，使用zepto实现，zepto近似jquery,非常简单方便；
效果如图：