html5 js字母索引,原生js实现html手机端城市列表索引选择城市

本文实例为大家分享了js实现手机端城市列表索引选择城市的具体代码，供大家参考，具体内容如下

html部分：

定位城市

上海市

css部分：

*{

margin: 0;

padding: 0;

list-style: none;

}

html{

font-size: 12px;

}

body {

background-color: #f5f5f5;

font-family: 'PingFang SC Regular', 'PingFang SC';

width: 100%;

height: 100%;

min-width: 320px;

max-width: 480px;

position: relative;

}

.cityPage {

width: 100%;

height: 100%;

/* border: 1px solid black; */

position: relative;

top: 0;

display: flex;

flex-direction: column;

/* justify-content: center; */

}

.cityContent {

width: 100%;

height: 140px;

/* border: 1px solid black; */

background: #f7f7f9;

position: fixed;

z-index: 9999;

top: 0;

}

.inputBox input {

width: 90%;

height: 30px;

border: 1px solid rgb(215, 215, 215);

outline: none;

background: #fff;

margin-left: 4%;

border-radius: 4px;

padding-left: 4px;

color: #9e9e9e;

font-size: 14px;

margin-bottom: 16px;

margin-top: 14px;

}

.localCity {

color: #333;

font-size: 13px;

font-weight: bold;

margin-left: 4.5%;

margin-bottom: 16px;

}

.cityname {

font-size: 13px;

margin-left: 4.5%;

margin-bottom: 16px;

}

#list {

font-size: 13px;

position: fixed;

height: 100%;

top: 140px;

width: 100%;

overflow: scroll;

font-size: 15px;

/* margin-bottom: 140px; */

/* bottom: 200px; */

}

#list>section {

overflow-y: auto;

height: 100%;

margin-bottom: 140px;

}

#list>section>dl>dt {

background: #f7f7f9;

color: #999;

height: 40px;

line-height: 40px;

padding-left: 15px;

}

#list>section>dl>dd {

color: #333;

line-height: 40px;

padding-left: 15px;

position: relative;

background-color: #fff;

}

#list>section>dl>dd:after {

content: '';

position: absolute;

left: 0;

bottom: 1px;

width: 100%;

height: 1px;

background-color: #c8c7cc;

transform: scaleY(.5);

-webkit-transform: scaleY(.5);

}

#list>section>dl>dd:last-of-type:after {

display: none;

}

#navBar {

position: fixed;

width: 26px;

height: 50%;

right: 0;

z-index: 30;

top: 50%;

display: flex;

flex-direction: column;

margin-top: -25%;

/* text-align: center; */

}

#navBar.active {

background: rgba(211, 211, 211, .6);

}

#navBar>div {

text-align: center;

display: block;

text-decoration: none;

/* height: 4.166%;

line-height: 100%; */

color: #333;

font-size: 13px;

flex: 1;

}

.letterBox{

width: 40px;

height: 40px;

background:#9f9f9f;

opacity: .5;

position: fixed;

top: 50%;

left: 50%;

margin-top: -25px;

margin-left: -25px;

text-align: center;

line-height: 40px;

color: #fff;

display: none;

}