demo中演示了全国各地弹出层,并用A-Z字母排序,点击右边的悬浮字母,可定位到指定位置。jQuery常用的城市列表弹出层。
城市列表
<div class="city">
<div class="city-list"><span class="city-letter" id="A1">A</span>
<p data-id="210300">鞍山市</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="652700">博尔塔拉蒙古自治州</p>
<p data-id="110100">北京市</p>
</div>
</div>
A-Z字母
<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:;">Y</a></li>
<li><a href="javascript:;">Z</a></li>
</ul>
</div>
//加载城市事件
$('body').on('click', '#zone_ids,#gr_zone_ids', function () {
var zid = $(this).attr('id');
$('.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'));
$('.container').hide();
});
$('body').on('click', '.letter a', function () {
var s = $(this).html();
$(window).scrollTop($('#' + s + '1').offset().top);
});
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791