jquery手机触屏滑动拼音字母城市选择器代码
Posted 一梦_浮生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery手机触屏滑动拼音字母城市选择器代码相关的知识，希望对你有一定的参考价值。
今天用到城市选择，直接用拼音滑动方式来选择，用的时候引入jquery（个别样式需要自己修改）
<div class="yp_indz"><img src="images/dizhi.png" alt=""><em>北京</em></div> <!--省份列表--> <div class="dzhc_xs"> <nav> <div class="dhjt"> <a href="JavaScrip:;" class="yy_gb"><!--<img src="images/dhjt.png" alt="">--></a> <span>全部地址</span> </div> </nav> <!--显示点击的是哪一个字母--> <div id="showLetter" class="showLetter"><span>当前</span></div> <!--城市索引查询--> <div class="letter"> <ul> <li><a href="javascript:;" data-html="present">当前</a></li> <li><a href="javascript:;" data-html="hot">热门</a></li> <li><a href="javascript:;" data-html="A">A</a></li> <li><a href="javascript:;" data-html="B">B</a></li> <li><a href="javascript:;" data-html="C">C</a></li> <li><a href="javascript:;" data-html="D">D</a></li> <li><a href="javascript:;" data-html="E">E</a></li> <li><a href="javascript:;" data-html="F">F</a></li> <li><a href="javascript:;" data-html="G">G</a></li> <li><a href="javascript:;" data-html="H">H</a></li> <li><a href="javascript:;" data-html="J">J</a></li> <li><a href="javascript:;" data-html="K">K</a></li> <li><a href="javascript:;" data-html="L">L</a></li> <li><a href="javascript:;" data-html="M">M</a></li> <li><a href="javascript:;" data-html="N">N</a></li> <li><a href="javascript:;" data-html="P">P</a></li> <li><a href="javascript:;" data-html="Q">Q</a></li> <li><a href="javascript:;" data-html="R">R</a></li> <li><a href="javascript:;" data-html="S">S</a></li> <li><a href="javascript:;" data-html="T">T</a></li> <li><a href="javascript:;" data-html="W">W</a></li> <li><a href="javascript:;" data-html="X">X</a></li> <li><a href="javascript:;" data-html="Y">Y</a></li> <li><a href="javascript:;" data-html="Z">Z</a></li> </ul> </div> <!--城市列表--> <div class="contai"> <div class="city"> <div class="city-list"><span class="city-letter" id="present1">当前城市</span> <p data-id="210300">徐州市</p> </div> <div class="city-list"><span class="city-letter" id="hot1">热门城市</span> <p data-id="210300">北京市</p> <p data-id="152900">上海市</p> <p data-id="340800">云南</p> <p data-id="410500">四川</p> <p data-id="542500">济南</p> <p data-id="610900">青岛</p> </div> <div class="city-list"><span class="city-letter" id="A1">A</span> <p data-id="210300">鞍山市</p> <p data-id="152900">阿拉善盟</p> <p data-id="340800">安庆市</p> <p data-id="410500">安阳市</p> <p data-id="542500">阿里地区</p> <p data-id="610900">安康市</p> <p data-id="520400">安顺市</p> <p data-id="513200">阿坝藏族羌族自治州</p> <p data-id="659002">阿拉尔市</p> <p data-id="652900">阿克苏地区</p> <p data-id="820100">澳门特别行政区</p> <p data-id="654300">阿勒泰地区</p> </div> <div class="city-list"><span class="city-letter" id="B1">B</span> <p data-id="220800">白城市</p> <p data-id="150200">包头市</p> <p data-id="150800">巴彦淖尔市</p> <p data-id="130600">保定市</p> <p data-id="210500">本溪市</p> <p data-id="220600">白山市</p> <p data-id="341600">亳州市</p> <p data-id="340300">蚌埠市</p> <p data-id="371600">滨州市</p> <p data-id="620400">白银市</p> <p data-id="610300">宝鸡市</p> <p data-id="530500">保山市</p> <p data-id="469030">白沙黎族自治县</p> <p data-id="451000">百色市</p> <p data-id="522401">毕节市</p> <p data-id="450500">北海市</p> <p data-id="511900">巴中市</p> <p data-id="469035">保亭黎族苗族自治县</p> <p data-id="652800">巴音郭楞蒙古自治州</p> <p data-id="652700">博尔塔拉蒙古自治州</p> <p data-id="110100">北京市</p> </div> <div class="city-list"><span class="city-letter" id="C1">C</span> <p data-id="140400">长治市</p> <p data-id="130900">沧州市</p> <p data-id="320400">常州市</p> <p data-id="330282">慈溪市</p> <p data-id="320581">常熟市</p> <p data-id="130800">承德市</p> <p data-id="150400">赤峰市</p> <p data-id="220100">长春市</p> <p data-id="431000">郴州市</p> <p data-id="430100">长沙市</p> <p data-id="341100">滁州市</p> <p data-id="430700">常德市</p> <p data-id="341400">巢湖市</p> <p data-id="341700">池州市</p> <p data-id="469027">澄迈县</p> <p data-id="451400">崇左市</p> <p data-id="469031">昌江黎族自治县</p> <p data-id="532300">楚雄彝族自治州</p> <p data-id="445100">潮州市</p> <p data-id="500100">重庆市</p> <p data-id="510100">成都市</p> <p data-id="542100">昌都地区</p> <p data-id="652300">昌吉回族自治州</p> </div> <div class="city-list"><span class="city-letter" id="D1">D</span> <p data-id="232700">大兴安岭地区</p> <p data-id="140200">大同市</p> <p data-id="230600">大庆市</p> <p data-id="321181">丹阳市</p> <p data-id="210200">大连市</p> <p data-id="210600">丹东市</p> <p data-id="370500">东营市</p> <p data-id="371400">德州市</p> <p data-id="511700">达州市</p> <p data-id="532900">大理白族自治州</p> <p data-id="469003">儋州市</p> <p data-id="469025">定安县</p> <p data-id="533400">迪庆藏族自治州</p> <p data-id="510600">德阳市</p> <p data-id="469007">东方市</p> <p data-id="533100">德宏傣族景颇族自治州</p> <p data-id="441900">东莞市</p> <p data-id="621100">定西市</p> </div> <div class="city-list"><span classzepto手机拼音字母城市选择器代码