请选择 进入手机版 | 继续访问电脑版

数字之家

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 4311|回复: 0

带字母索引的城市列表选择

[复制链接]

514

主题

519

帖子

2426

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2426
admin实名认证 发表于 2019-12-27 09:49:51 | 显示全部楼层 |阅读模式
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8. <meta name="format-detection" content="telephone=no">
  9. <title>城市选择</title>

  10. <style type="text/css">

  11. body,div,dl,dt,dd,ul,li,form,input,button,h1,h2,h3,h4,h5,h6,p{margin: 0 auto;padding:0;font-family:"微软雅黑";color:#00C7C7}
  12. ul,li,dl,dt,dd{display:block;list-style:none;}
  13. a{text-decoration:none;outline:none;}
  14. .fl{float:left;}
  15. .fr{float:right;}
  16. .none{display:none;}
  17. .loan_jm1{width:94%;margin:0 auto;}
  18. .loan_jm_spa1{width:39%;height:40px;line-height:40px;font-size:1em;color:#666;display:block;float:left;}
  19. .loan_jm_l1{margin-top:10px;margin-bottom:15px;height:40px;}
  20. .wbk_srn{width:57%;height:40px;border:1px solid #ccc;background:#FFF;float:left;padding-left:3%;line-height:40px;color:#ADADAD;
  21. font-size:1.1em; background-size:45%;background-position:center;background:#fff;}
  22. .wbk_srn b{width:30px;height:40px;border:1px solid #ccc;background:#FFF;float:left;padding-left:3%;line-height:40px;color:#ADADAD;
  23. font-size:1.1em;}
  24. /*显示点击是哪个字母*/
  25. .showLetter{
  26.         position: fixed;
  27.         color:#00C7C7;
  28.         width: 50px;
  29.         height:50px;
  30.         top:50%;
  31.         left: 50%;
  32.         border-radius: 50%;
  33.         border: #00C7C7 1px solid;
  34.         text-align: center;
  35.         display: none;
  36. }
  37. .showLetter span{
  38.         width: 50px;
  39.         height: 50px;
  40.         line-height: 50px;
  41.         font-size: 30px;
  42. }
  43. /*城市弹层*/
  44. .container{width:70%;}
  45. .letter{width:auto;position:fixed;top:3%;right:10px;text-align:center;}
  46. .letter ul{list-style-type:none;}
  47. .letter ul li a{text-decoration:none;color:#00C7C7;font-size: 12px}
  48. .city{width:90%;overflow:hidden;padding:20px;}
  49. .city-list{width:100%;}
  50. .city-list .city-letter{font-size:20px;display:inline-block;padding-top:15px;padding-bottom:5px;border-bottom:1px solid #e8ecf1;width:100%;}
  51. .city-list p{color:#afafaf;width:95%;height:50px;line-height:50px;border-bottom:1px solid #e8ecf1;cursor:pointer;}
  52. .UISelect{margin-top:5px}

  53. </style>
  54. </head>
  55. <body>
  56. <!--显示点击的是哪一个字母-->
  57. <div id="showLetter" class="showLetter"><span>A</span></div>
  58. <!--城市索引查询-->
  59. <div class="letter">
  60.         <ul>
  61.                 <li><a href="javascript:;">A</a></li>
  62.                 <li><a href="javascript:;">B</a></li>
  63.                 <li><a href="javascript:;">C</a></li>
  64.                 <li><a href="javascript:;">D</a></li>
  65.                 <li><a href="javascript:;">E</a></li>
  66.                 <li><a href="javascript:;">F</a></li>
  67.                 <li><a href="javascript:;">G</a></li>
  68.                 <li><a href="javascript:;">H</a></li>
  69.                 <li><a href="javascript:;">I</a></li>
  70.                 <li><a href="javascript:;">J</a></li>
  71.                 <li><a href="javascript:;">K</a></li>
  72.                 <li><a href="javascript:;">L</a></li>
  73.                 <li><a href="javascript:;">M</a></li>
  74.                 <li><a href="javascript:;">N</a></li>
  75.                 <li><a href="javascript:;">O</a></li>
  76.                 <li><a href="javascript:;">P</a></li>
  77.                 <li><a href="javascript:;">Q</a></li>
  78.                 <li><a href="javascript:;">R</a></li>
  79.                 <li><a href="javascript:;">S</a></li>
  80.                 <li><a href="javascript:;">T</a></li>
  81.                 <li><a href="javascript:;">U</a></li>
  82.                 <li><a href="javascript:;">V</a></li>
  83.                 <li><a href="javascript:;">W</a></li>
  84.                 <li><a href="javascript:;">X</a></li>
  85.                 <li><a href="javascript:;">Y</a></li>
  86.                 <li><a href="javascript:;">Z</a></li>
  87.         </ul>
  88. </div>
  89. <!--城市列表-->
  90. <div class="container">
  91.         <div class="city">
  92.                 <div class="city-list"><span class="city-letter" id="A1">A</span>
  93.                         <p data-id="210300">鞍山市</p>
  94.                         <p data-id="152900">阿拉善盟</p>
  95.                         <p data-id="340800">安庆市</p>
  96.                         <p data-id="410500">安阳市</p>
  97.                         <p data-id="542500">阿里地区</p>
  98.                         <p data-id="610900">安康市</p>
  99.                         <p data-id="520400">安顺市</p>
  100.                         <p data-id="513200">阿坝藏族羌族自治州</p>
  101.                         <p data-id="659002">阿拉尔市</p>
  102.                         <p data-id="652900">阿克苏地区</p>
  103.                         <p data-id="820100">澳门特别行政区</p>
  104.                         <p data-id="654300">阿勒泰地区</p>
  105.                 </div>
  106.                 <div class="city-list"><span class="city-letter" id="B1">B</span>
  107.                         <p data-id="220800">白城市</p>
  108.                         <p data-id="150200">包头市</p>
  109.                         <p data-id="150800">巴彦淖尔市</p>
  110.                         <p data-id="130600">保定市</p>
  111.                         <p data-id="210500">本溪市</p>
  112.                         <p data-id="220600">白山市</p>
  113.                         <p data-id="341600">亳州市</p>
  114.                         <p data-id="340300">蚌埠市</p>
  115.                         <p data-id="371600">滨州市</p>
  116.                         <p data-id="620400">白银市</p>
  117.                         <p data-id="610300">宝鸡市</p>
  118.                         <p data-id="530500">保山市</p>
  119.                         <p data-id="469030">白沙黎族自治县</p>
  120.                         <p data-id="451000">百色市</p>
  121.                         <p data-id="522401">毕节市</p>
  122.                         <p data-id="450500">北海市</p>
  123.                         <p data-id="511900">巴中市</p>
  124.                         <p data-id="469035">保亭黎族苗族自治县</p>
  125.                         <p data-id="652800">巴音郭楞蒙古自治州</p>
  126.                         <p data-id="652700">博尔塔拉蒙古自治州</p>
  127.                         <p data-id="110100">北京市</p>
  128.                 </div>
  129.                 <div class="city-list"><span class="city-letter" id="C1">C</span>
  130.                         <p data-id="140400">长治市</p>
  131.                         <p data-id="130900">沧州市</p>
  132.                         <p data-id="320400">常州市</p>
  133.                         <p data-id="330282">慈溪市</p>
  134.                         <p data-id="320581">常熟市</p>
  135.                         <p data-id="130800">承德市</p>
  136.                         <p data-id="150400">赤峰市</p>
  137.                         <p data-id="220100">长春市</p>
  138.                         <p data-id="431000">郴州市</p>
  139.                         <p data-id="430100">长沙市</p>
  140.                         <p data-id="341100">滁州市</p>
  141.                         <p data-id="430700">常德市</p>
  142.                         <p data-id="341400">巢湖市</p>
  143.                         <p data-id="341700">池州市</p>
  144.                         <p data-id="469027">澄迈县</p>
  145.                         <p data-id="451400">崇左市</p>
  146.                         <p data-id="469031">昌江黎族自治县</p>
  147.                         <p data-id="532300">楚雄彝族自治州</p>
  148.                         <p data-id="445100">潮州市</p>
  149.                         <p data-id="500100">重庆市</p>
  150.                         <p data-id="510100">成都市</p>
  151.                         <p data-id="542100">昌都地区</p>
  152.                         <p data-id="652300">昌吉回族自治州</p>
  153.                 </div>
  154.                 <div class="city-list"><span class="city-letter" id="D1">D</span>
  155.                         <p data-id="232700">大兴安岭地区</p>
  156.                         <p data-id="140200">大同市</p>
  157.                         <p data-id="230600">大庆市</p>
  158.                         <p data-id="321181">丹阳市</p>
  159.                         <p data-id="210200">大连市</p>
  160.                         <p data-id="210600">丹东市</p>
  161.                         <p data-id="370500">东营市</p>
  162.                         <p data-id="371400">德州市</p>
  163.                         <p data-id="511700">达州市</p>
  164.                         <p data-id="532900">大理白族自治州</p>
  165.                         <p data-id="469003">儋州市</p>
  166.                         <p data-id="469025">定安县</p>
  167.                         <p data-id="533400">迪庆藏族自治州</p>
  168.                         <p data-id="510600">德阳市</p>
  169.                         <p data-id="469007">东方市</p>
  170.                         <p data-id="533100">德宏傣族景颇族自治州</p>
  171.                         <p data-id="441900">东莞市</p>
  172.                         <p data-id="621100">定西市</p>
  173.                 </div>
  174.                 <div class="city-list"><span class="city-letter" id="E1">E</span>
  175.                         <p data-id="150600">鄂尔多斯市</p>
  176.                         <p data-id="420700">鄂州市</p>
  177.                         <p data-id="422800">恩施土家族苗族自治州</p>
  178.                 </div>
  179.                 <div class="city-list"><span class="city-letter" id="F1">F</span>
  180.                         <p data-id="210900">阜新市</p>
  181.                         <p data-id="210400">抚顺市</p>
  182.                         <p data-id="350181">福清市</p>
  183.                         <p data-id="341200">阜阳市</p>
  184.                         <p data-id="370983">肥城市</p>
  185.                         <p data-id="361000">抚州市</p>
  186.                         <p data-id="350100">福州市</p>
  187.                         <p data-id="440600">佛山市</p>
  188.                         <p data-id="450600">防城港市</p>
  189.                 </div>
  190.                 <div class="city-list"><span class="city-letter" id="G1">G</span>
  191.                         <p data-id="440100">广州市</p>
  192.                         <p data-id="360700">赣州市</p>
  193.                         <p data-id="510800">广元市</p>
  194.                         <p data-id="511600">广安市</p>
  195.                         <p data-id="450300">桂林市</p>
  196.                         <p data-id="450800">贵港市</p>
  197.                         <p data-id="520100">贵阳市</p>
  198.                         <p data-id="513300">甘孜藏族自治州</p>
  199.                         <p data-id="623000">甘南藏族自治州</p>
  200.                         <p data-id="640400">固原市</p>
  201.                         <p data-id="632600">果洛藏族自治州</p>
  202.                 </div>
  203.                 <div class="city-list"><span class="city-letter" id="H1">H</span>
  204.                         <p data-id="231100">黑河市</p>
  205.                         <p data-id="211400">葫芦岛市</p>
  206.                         <p data-id="330481">海宁市</p>
  207.                         <p data-id="320800">淮安市</p>
  208.                         <p data-id="131100">衡水市</p>
  209.                         <p data-id="150100">呼和浩特市</p>
  210.                         <p data-id="330500">湖州市</p>
  211.                         <p data-id="230400">鹤岗市</p>
  212.                         <p data-id="150700">呼伦贝尔市</p>
  213.                         <p data-id="230100">哈尔滨市</p>
  214.                         <p data-id="130400">邯郸市</p>
  215.                         <p data-id="330100">杭州市</p>
  216.                         <p data-id="410600">鹤壁市</p>
  217.                         <p data-id="371700">菏泽市</p>
  218.                         <p data-id="420200">黄石市</p>
  219.                         <p data-id="431200">怀化市</p>
  220.                         <p data-id="340600">淮北市</p>
  221.                         <p data-id="421100">黄冈市</p>
  222.                         <p data-id="430400">衡阳市</p>
  223.                         <p data-id="340100">合肥市</p>
  224.                         <p data-id="340400">淮南市</p>
  225.                         <p data-id="341000">黄山市</p>
  226.                         <p data-id="451200">河池市</p>
  227.                         <p data-id="460100">海口市</p>
  228.                         <p data-id="441600">河源市</p>
  229.                         <p data-id="532500">红河哈尼族彝族自治州</p>
  230.                         <p data-id="441300">惠州市</p>
  231.                         <p data-id="610700">汉中市</p>
  232.                         <p data-id="451100">贺州市</p>
  233.                         <p data-id="632800">海西蒙古族藏族自治州</p>
  234.                         <p data-id="632100">海东市</p>
  235.                         <p data-id="632300">黄南藏族自治州</p>
  236.                         <p data-id="652200">哈密地区</p>
  237.                         <p data-id="632200">海北藏族自治州</p>
  238.                         <p data-id="653200">和田地区</p>
  239.                         <p data-id="632500">海南藏族自治州</p>
  240.                 </div>
  241.                 <div class="city-list"><span class="city-letter" id="J1">J</span>
  242.                         <p data-id="210700">锦州市</p>
  243.                         <p data-id="330700">金华市</p>
  244.                         <p data-id="140700">晋中市</p>
  245.                         <p data-id="320281">江阴市</p>
  246.                         <p data-id="220200">吉林市</p>
  247.                         <p data-id="230800">佳木斯市</p>
  248.                         <p data-id="230300">鸡西市</p>
  249.                         <p data-id="330400">嘉兴市</p>
  250.                         <p data-id="140500">晋城市</p>
  251.                         <p data-id="350582">晋江市</p>
  252.                         <p data-id="370282">即墨市</p>
  253.                         <p data-id="360800">吉安市</p>
  254.                         <p data-id="370100">济南市</p>
  255.                         <p data-id="420800">荆门市</p>
  256.                         <p data-id="410800">焦作市</p>
  257.                         <p data-id="370800">济宁市</p>
  258.                         <p data-id="410881">济源市</p>
  259.                         <p data-id="421000">荆州市</p>
  260.                         <p data-id="360400">九江市</p>
  261.                         <p data-id="360200">景德镇市</p>
  262.                         <p data-id="445200">揭阳市</p>
  263.                         <p data-id="620300">金昌市</p>
  264.                         <p data-id="440700">江门市</p>
  265.                         <p data-id="620200">嘉峪关市</p>
  266.                         <p data-id="620900">酒泉市</p>
  267.                 </div>
  268.                 <div class="city-list"><span class="city-letter" id="K1">K</span>
  269.                         <p data-id="320583">昆山市</p>
  270.                         <p data-id="410200">开封市</p>
  271.                         <p data-id="530100">昆明市</p>
  272.                         <p data-id="650200">克拉玛依市</p>
  273.                         <p data-id="653000">克孜勒苏柯尔克孜自治州</p>
  274.                         <p data-id="653100">喀什地区</p>
  275.                 </div>
  276.                 <div class="city-list"><span class="city-letter" id="L1">L</span>
  277.                         <p data-id="141000">临汾市</p>
  278.                         <p data-id="131000">廊坊市</p>
  279.                         <p data-id="211000">辽阳市</p>
  280.                         <p data-id="220400">辽源市</p>
  281.                         <p data-id="141100">吕梁市</p>
  282.                         <p data-id="320700">连云港市</p>
  283.                         <p data-id="371200">莱芜市</p>
  284.                         <p data-id="411100">漯河市</p>
  285.                         <p data-id="331100">丽水市</p>
  286.                         <p data-id="341500">六安市</p>
  287.                         <p data-id="431300">娄底市</p>
  288.                         <p data-id="350800">龙岩市</p>
  289.                         <p data-id="370681">龙口市</p>
  290.                         <p data-id="371300">临沂市</p>
  291.                         <p data-id="410300">洛阳市</p>
  292.                         <p data-id="371500">聊城市</p>
  293.                         <p data-id="530700">丽江市</p>
  294.                         <p data-id="451300">来宾市</p>
  295.                         <p data-id="510500">泸州市</p>
  296.                         <p data-id="530900">临沧市</p>
  297.                         <p data-id="469033">乐东黎族自治县</p>
  298.                         <p data-id="511100">乐山市</p>
  299.                         <p data-id="620100">兰州市</p>
  300.                         <p data-id="450200">柳州市</p>
  301.                         <p data-id="513400">凉山彝族自治州</p>
  302.                         <p data-id="469034">陵水黎族自治县</p>
  303.                         <p data-id="542600">林芝地区</p>
  304.                         <p data-id="469028">临高县</p>
  305.                         <p data-id="540100">拉萨市</p>
  306.                         <p data-id="520200">六盘水市</p>
  307.                         <p data-id="621200">陇南市</p>
  308.                         <p data-id="622900">临夏回族自治州</p>
  309.                 </div>
  310.                 <div class="city-list"><span class="city-letter" id="M1">M</span>
  311.                         <p data-id="231000">牡丹江市</p>
  312.                         <p data-id="340500">马鞍山市</p>
  313.                         <p data-id="510700">绵阳市</p>
  314.                         <p data-id="511400">眉山市</p>
  315.                         <p data-id="440900">茂名市</p>
  316.                         <p data-id="441400">梅州市</p>
  317.                 </div>
  318.                 <div class="city-list"><span class="city-letter" id="N1">N</span>
  319.                         <p data-id="320100">南京市</p>
  320.                         <p data-id="330200">宁波市</p>
  321.                         <p data-id="320600">南通市</p>
  322.                         <p data-id="360100">南昌市</p>
  323.                         <p data-id="411300">南阳市</p>
  324.                         <p data-id="350700">南平市</p>
  325.                         <p data-id="350900">宁德市</p>
  326.                         <p data-id="350583">南安市</p>
  327.                         <p data-id="542400">那曲地区</p>
  328.                         <p data-id="450100">南宁市</p>
  329.                         <p data-id="511300">南充市</p>
  330.                         <p data-id="511000">内江市</p>
  331.                         <p data-id="533300">怒江傈僳族自治州</p>
  332.                 </div>
  333.                 <div class="city-list"><span class="city-letter" id="P1">P</span>
  334.                         <p data-id="211100">盘锦市</p>
  335.                         <p data-id="360300">萍乡市</p>
  336.                         <p data-id="410400">平顶山市</p>
  337.                         <p data-id="410900">濮阳市</p>
  338.                         <p data-id="350300">莆田市</p>
  339.                         <p data-id="510400">攀枝花市</p>
  340.                         <p data-id="530800">普洱市</p>
  341.                         <p data-id="620800">平凉市</p>
  342.                 </div>
  343.                 <div class="city-list"><span class="city-letter" id="Q1">Q</span>
  344.                         <p data-id="130300">秦皇岛市</p>
  345.                         <p data-id="230200">齐齐哈尔市</p>
  346.                         <p data-id="230900">七台河市</p>
  347.                         <p data-id="350500">泉州市</p>
  348.                         <p data-id="429005">潜江市</p>
  349.                         <p data-id="370200">青岛市</p>
  350.                         <p data-id="330800">衢州市</p>
  351.                         <p data-id="441800">清远市</p>
  352.                         <p data-id="522700">黔南布依族苗族自治州</p>
  353.                         <p data-id="450700">钦州市</p>
  354.                         <p data-id="530300">曲靖市</p>
  355.                         <p data-id="522300">黔西南布依族苗族自治州</p>
  356.                         <p data-id="621000">庆阳市</p>
  357.                         <p data-id="522600">黔东南苗族侗族自治州</p>
  358.                         <p data-id="469002">琼海市</p>
  359.                         <p data-id="469036">琼中黎族苗族自治县</p>
  360.                 </div>
  361.                 <div class="city-list"><span class="city-letter" id="R1">R</span>
  362.                         <p data-id="320682">如皋市</p>
  363.                         <p data-id="371082">荣成市</p>
  364.                         <p data-id="371100">日照市</p>
  365.                         <p data-id="542301">日喀则市</p>
  366.                 </div>
  367.                 <div class="city-list"><span class="city-letter" id="S1">S</span>
  368.                         <p data-id="220300">四平市</p>
  369.                         <p data-id="231200">绥化市</p>
  370.                         <p data-id="220700">松原市</p>
  371.                         <p data-id="320500">苏州市</p>
  372.                         <p data-id="310100">上海市</p>
  373.                         <p data-id="321300">宿迁市</p>
  374.                         <p data-id="330600">绍兴市</p>
  375.                         <p data-id="140600">朔州市</p>
  376.                         <p data-id="230500">双鸭山市</p>
  377.                         <p data-id="210100">沈阳市</p>
  378.                         <p data-id="330682">上虞市</p>
  379.                         <p data-id="130100">石家庄市</p>
  380.                         <p data-id="440500">汕头市</p>
  381.                         <p data-id="350400">三明市</p>
  382.                         <p data-id="429021">神农架林区</p>
  383.                         <p data-id="361100">上饶市</p>
  384.                         <p data-id="411400">商丘市</p>
  385.                         <p data-id="421300">随州市</p>
  386.                         <p data-id="341300">宿州市</p>
  387.                         <p data-id="411200">三门峡市</p>
  388.                         <p data-id="420300">十堰市</p>
  389.                         <p data-id="440300">深圳市</p>
  390.                         <p data-id="430500">邵阳市</p>
  391.                         <p data-id="440200">韶关市</p>
  392.                         <p data-id="441500">汕尾市</p>
  393.                         <p data-id="510900">遂宁市</p>
  394.                         <p data-id="611000">商洛市</p>
  395.                         <p data-id="542200">山南地区</p>
  396.                         <p data-id="460200">三亚市</p>
  397.                         <p data-id="640200">石嘴山市</p>
  398.                         <p data-id="659001">石河子市</p>
  399.                 </div>
  400.                 <div class="city-list"><span class="city-letter" id="T1">T</span>
  401.                         <p data-id="140100">太原市</p>
  402.                         <p data-id="211200">铁岭市</p>
  403.                         <p data-id="220500">通化市</p>
  404.                         <p data-id="130200">唐山市</p>
  405.                         <p data-id="320585">太仓市</p>
  406.                         <p data-id="120100">天津市</p>
  407.                         <p data-id="321200">泰州市</p>
  408.                         <p data-id="150500">通辽市</p>
  409.                         <p data-id="331000">台州市</p>
  410.                         <p data-id="370900">泰安市</p>
  411.                         <p data-id="429006">天门市</p>
  412.                         <p data-id="340700">铜陵市</p>
  413.                         <p data-id="522201">铜仁市</p>
  414.                         <p data-id="469026">屯昌县</p>
  415.                         <p data-id="610200">铜川市</p>
  416.                         <p data-id="620500">天水市</p>
  417.                         <p data-id="654200">塔城地区</p>
  418.                         <p data-id="659003">图木舒克市</p>
  419.                         <p data-id="652100">吐鲁番地区</p>
  420.                         <p data-id="710100">台湾</p>
  421.                 </div>
  422.                 <div class="city-list"><span class="city-letter" id="W1">W</span>
  423.                         <p data-id="330300">温州市</p>
  424.                         <p data-id="320200">无锡市</p>
  425.                         <p data-id="150900">乌兰察布市</p>
  426.                         <p data-id="150300">乌海市</p>
  427.                         <p data-id="340200">芜湖市</p>
  428.                         <p data-id="420100">武汉市</p>
  429.                         <p data-id="370700">潍坊市</p>
  430.                         <p data-id="371000">威海市</p>
  431.                         <p data-id="469006">万宁市</p>
  432.                         <p data-id="610500">渭南市</p>
  433.                         <p data-id="469005">文昌市</p>
  434.                         <p data-id="469001">五指山市</p>
  435.                         <p data-id="620600">武威市</p>
  436.                         <p data-id="450400">梧州市</p>
  437.                         <p data-id="532600">文山壮族苗族自治州</p>
  438.                         <p data-id="659004">五家渠市</p>
  439.                         <p data-id="640300">吴忠市</p>
  440.                         <p data-id="650100">乌鲁木齐市</p>
  441.                 </div>
  442.                 <div class="city-list"><span class="city-letter" id="X1">X</span>
  443.                         <p data-id="140900">忻州市</p>
  444.                         <p data-id="152500">锡林郭勒盟</p>
  445.                         <p data-id="130500">邢台市</p>
  446.                         <p data-id="152200">兴安盟</p>
  447.                         <p data-id="320300">徐州市</p>
  448.                         <p data-id="410700">新乡市</p>
  449.                         <p data-id="420600">襄阳市</p>
  450.                         <p data-id="360500">新余市</p>
  451.                         <p data-id="411500">信阳市</p>
  452.                         <p data-id="429004">仙桃市</p>
  453.                         <p data-id="411000">许昌市</p>
  454.                         <p data-id="430300">湘潭市</p>
  455.                         <p data-id="350200">厦门市</p>
  456.                         <p data-id="341800">宣城市</p>
  457.                         <p data-id="420900">孝感市</p>
  458.                         <p data-id="421200">咸宁市</p>
  459.                         <p data-id="433100">湘西土家族苗族自治州</p>
  460.                         <p data-id="610100">西安市</p>
  461.                         <p data-id="610400">咸阳市</p>
  462.                         <p data-id="532800">西双版纳傣族自治州</p>
  463.                         <p data-id="630100">西宁市</p>
  464.                         <p data-id="810100">香港特别行政区</p>
  465.                 </div>
  466.                 <div class="city-list"><span class="city-letter" id="Y1">Y</span>
  467.                         <p data-id="320282">宜兴市</p>
  468.                         <p data-id="222400">延边朝鲜族自治州</p>
  469.                         <p data-id="321000">扬州市</p>
  470.                         <p data-id="140800">运城市</p>
  471.                         <p data-id="320900">盐城市</p>
  472.                         <p data-id="140300">阳泉市</p>
  473.                         <p data-id="330281">余姚市</p>
  474.                         <p data-id="230700">伊春市</p>
  475.                         <p data-id="210800">营口市</p>
  476.                         <p data-id="370600">烟台市</p>
  477.                         <p data-id="420500">宜昌市</p>
  478.                         <p data-id="430600">岳阳市</p>
  479.                         <p data-id="360900">宜春市</p>
  480.                         <p data-id="430900">益阳市</p>
  481.                         <p data-id="330782">义乌市</p>
  482.                         <p data-id="360600">鹰潭市</p>
  483.                         <p data-id="431100">永州市</p>
  484.                         <p data-id="450900">玉林市</p>
  485.                         <p data-id="511800">雅安市</p>
  486.                         <p data-id="530400">玉溪市</p>
  487.                         <p data-id="441700">阳江市</p>
  488.                         <p data-id="610800">榆林市</p>
  489.                         <p data-id="511500">宜宾市</p>
  490.                         <p data-id="445300">云浮市</p>
  491.                         <p data-id="610600">延安市</p>
  492.                         <p data-id="654000">伊犁哈萨克自治州</p>
  493.                         <p data-id="640100">银川市</p>
  494.                         <p data-id="632700">玉树藏族自治州</p>
  495.                 </div>
  496.                 <div class="city-list"><span class="city-letter" id="Z1">Z</span>
  497.                         <p data-id="130700">张家口市</p>
  498.                         <p data-id="330681">诸暨市</p>
  499.                         <p data-id="321100">镇江市</p>
  500.                         <p data-id="320582">张家港市</p>
  501.                         <p data-id="211300">朝阳市</p>
  502.                         <p data-id="430800">张家界市</p>
  503.                         <p data-id="410100">郑州市</p>
  504.                         <p data-id="370400">枣庄市</p>
  505.                         <p data-id="330900">舟山市</p>
  506.                         <p data-id="440183">增城市</p>
  507.                         <p data-id="440400">珠海市</p>
  508.                         <p data-id="411600">周口市</p>
  509.                         <p data-id="370300">淄博市</p>
  510.                         <p data-id="430200">株洲市</p>
  511.                         <p data-id="350600">漳州市</p>
  512.                         <p data-id="411700">驻马店市</p>
  513.                         <p data-id="440800">湛江市</p>
  514.                         <p data-id="520300">遵义市</p>
  515.                         <p data-id="510300">自贡市</p>
  516.                         <p data-id="530600">昭通市</p>
  517.                         <p data-id="441200">肇庆市</p>
  518.                         <p data-id="442000">中山市</p>
  519.                         <p data-id="620700">张掖市</p>
  520.                         <p data-id="512000">资阳市</p>
  521.                         <p data-id="640500">中卫市</p>
  522.                 </div>
  523.         </div>
  524. </div>
  525. <script src="/web/resource/js/lib/jquery-1.11.1.min.js"></script>
  526. <script type="text/javascript">
  527. $(function () {
  528.         //加载城市事件
  529.         $('.container').show();
  530. //选择城市 start
  531.         $('body').on('click', '.city-list p', function () {
  532.                 alert($(this).html())
  533.         });
  534.         //点击索引查询城市
  535.         $('body').on('click', '.letter a', function () {
  536.                 var s = $(this).html();
  537.                 $(window).scrollTop($('#' + s + '1').offset().top);
  538.                 $("#showLetter span").html(s);
  539.                 $("#showLetter").show().delay(500).hide(0);
  540.         });
  541.         //中间的标记显示
  542.         $('body').on('onMouse', '.showLetter span', function () {
  543.                 $("#showLetter").show().delay(500).hide(0);
  544.         });
  545.         
  546.         var letter=$('.letter');
  547.         var windowHeight=$(window).height();
  548.         var InitHeight=windowHeight-45;
  549.         letter.height(InitHeight);
  550.         var LiHeight=InitHeight/26;
  551.         letter.find('li').height(LiHeight);
  552.         letter.find('li').css("line-height",LiHeight+"px");
  553. })
  554. </script>
  555. </body>
  556. </html>
复制代码
将代码底部的jquery文件替换为你的目录即可。代码文件下载: test.html (20.68 KB, 下载次数: 0)
maomivip@mail.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|赢创志诚服务网 ( 鲁ICP备19000917号 )

GMT+8, 2020-9-28 04:28 , Processed in 0.064105 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表