H5省或地区选择、H5城市列表，排列与选择
2022/3/22 6:31:17
本文主要是介绍H5省或地区选择、H5城市列表，排列与选择，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>省或地区选择</title>
<style type="text/css">
/*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
}*/
ul,li,dl,dt,dd {
display: block;
list-style: none;
}
a {
text-decoration: none;
outline: none;
}
.fl {
float: left;
}
.fr {
float: right;
}
.none {
display: none;
}
.loan_jm1 {
width: 94%;
margin: 0 auto;
}
.loan_jm_spa1 {
width: 39%;
height: 40px;
line-height: 40px;
font-size: 1em;
color: #666;
display: block;
float: left;
}
.loan_jm_l1 {
margin-top: 10px;
margin-bottom: 15px;
height: 40px;
}
.wbk_srn {
width: 57%;
height: 40px;
border: 1px solid #ccc;
background: #FFF;
float: left;
padding-left: 3%;
line-height: 40px;
color: #ADADAD;
font-size: 1.1em;
background-size: 45%;
background-position: center;
background: #fff;
}
.wbk_srn b {
width: 30px;
height: 40px;
border: 1px solid #ccc;
background: #FFF;
float: left;
padding-left: 3%;
line-height: 40px;
color: #ADADAD;
font-size: 1.1em;
}
/*显示点击是哪个字母*/
.showLetter {
position: fixed;
color: #00C7C7;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
border-radius: 50%;
border: #00C7C7 1px solid;
text-align: center;
display: none;
}
.showLetter span {
width: 50px;
height: 50px;
line-height: 50px;
font-size: 30px;
}
/*城市弹层*/
.container {
width: 90%;
}
.letter {
width: auto;
position: fixed;
top: 3%;
right: 10px;
text-align: center;
}
.letter ul {
list-style-type: none;
}
.letter ul li a {
text-decoration: none;
color: #00C7C7;
font-size: 12px
}
.city {
width: 90%;
overflow: hidden;
padding: 20px;
}
.city-list {
width: 100%;
}
.city-list .city-letter {
font-size: 20px;
display: inline-block;
padding-top: 15px;
padding-bottom: 5px;
border-bottom: 1px solid #e8ecf1;
width: 100%;
}
.city-list p {
color: #afafaf;
width: 95%;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #e8ecf1;
cursor: pointer;
}
.UISelect {
margin-top: 5px
}
</style>
</head>
<body>
<div class="select-province">
<!--显示点击的是哪一个字母-->
<div id="showLetter" class="showLetter"><span>A</span></div>
<!--城市索引查询-->
<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:;">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:;">L</a>
</li>
<li>
<a href="javascript:;">N</a>
</li>
<li>
<a href="javascript:;">Q</a>
</li>
<li>
<a href="javascript:;">S</a>
</li>
<li>
<a href="javascript:;">T</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>
<div class="container">
<div class="city">
<div class="city-list"><span class="city-letter" id="A1">A</span>
<p data-id="220800">安徽(皖)</p>
<p data-id="150200">澳门特别行政区(澳)</p>
</div>
<div class="city-list"><span class="city-letter" id="B1">B</span>
<p data-id="110100">北京市（京）</p>
</div>
<div class="city-list"><span class="city-letter" id="C1">C</span>
<p data-id="232700">重庆(渝)</p>
</div>
<div class="city-list"><span class="city-letter" id="F1">F</span>
<p data-id="210900">福建省(闽)</p>
</div>
<div class="city-list"><span class="city-letter" id="G1">G</span>
<p data-id="440100">甘肃省(甘)</p>
<p data-id="360700">广东省(粤)</p>
<p data-id="510800">广西壮族自治区(桂)</p>
<p data-id="511600">贵州省(黔)</p>
</div>
<div class="city-list"><span class="city-letter" id="H1">H</span>
<p data-id="231100">海南省(琼)</p>
<p data-id="211400">河北省(冀)</p>
<p data-id="211400">河南省(豫)</p>
<p data-id="330481">湖北省(鄂)</p>
<p data-id="320800">黑龙江省(黑)</p>
<p data-id="131100">湖南省(湘)</p>
</div>
<div class="city-list"><span class="city-letter" id="J1">J</span>
<p data-id="210700">吉林省(吉)</p>
<p data-id="330700">江苏省(苏)</p>
<p data-id="140700">江西省(赣)</p>
</div>
<div class="city-list"><span class="city-letter" id="L1">L</span>
<p data-id="141000">辽宁省(辽) </p>
</div>
<div class="city-list"><span class="city-letter" id="N1">N</span>
<p data-id="320100">内蒙古自治区(蒙)</p>
<p data-id="330200">宁夏回族自治区(宁)</p>
</div>
<div class="city-list"><span class="city-letter" id="Q1">Q</span>
<p data-id="130300">青海省(青)</p>
</div>
<div class="city-list"><span class="city-letter" id="S1">S</span>
<p data-id="220300">山东省(鲁)</p>
<p data-id="231200">山西省(晋)</p>
<p data-id="220700">陕西省(陕)</p>
<p data-id="320500">上海市(沪)</p>
<p data-id="320500">四川省(川)</p>
</div>
<div class="city-list"><span class="city-letter" id="T1">T</span>
<p data-id="140100">台湾省(台)</p>
<p data-id="140100">天津市(津)</p>
</div>
<div class="city-list"><span class="city-letter" id="X1">X</span>
<p data-id="140900">西藏自治区(藏)</p>
<p data-id="140900">新疆维吾尔自治区(新)</p>
<p data-id="140900">香港特别行政区(港)</p>
</div>
<div class="city-list"><span class="city-letter" id="Y1">Y</span>
<p data-id="320282">云南省(滇)</p>
</div>
<div class="city-list"><span class="city-letter" id="Z1">Z</span>
<p data-id="130700">浙江省(浙)</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jQuery.1.10.1.min.js"></script>
<script type="text/javascript">
$(function() { //加载城市事件
$('.container').show();
//选择城市 start
$('body').on('click', '.city-list p', function() {
alert($(this).html())
}); //点击索引查询城市
$('body').on('click', '.letter a', function() {
var s = $(this).html();
$(window).scrollTop($('#' + s + '1').offset().top);
$("#showLetter span").html(s);
$("#showLetter").show().delay(500).hide(0);
}); //中间的标记显示
$('body').on('onMouse', '.showLetter span', function() {
$("#showLetter").show().delay(500).hide(0);
});
var letter = $('.letter');
var windowHeight = $(window).height();
var InitHeight = windowHeight - 45;
letter.height(InitHeight);
var LiHeight = InitHeight / 15;
letter.find('li').height(LiHeight);
letter.find('li').css("line-height", LiHeight + "px");
})
</script>
</body>
</html>
这篇关于H5省或地区选择、H5城市列表，排列与选择的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-23Springboot应用的多环境打包入门
- 2024-11-23Springboot应用的生产发布入门教程
- 2024-11-23Python编程入门指南
- 2024-11-23Java创业入门：从零开始的编程之旅
- 2024-11-23Java创业入门：新手必读的Java编程与创业指南
- 2024-11-23Java对接阿里云智能语音服务入门详解
- 2024-11-23Java对接阿里云智能语音服务入门教程
- 2024-11-23JAVA对接阿里云智能语音服务入门教程
- 2024-11-23Java副业入门：初学者的简单教程
- 2024-11-23JAVA副业入门：初学者的实战指南
