零基础学做网站培训介绍

当前位置:

如何制作网站全国分站点选择功能

像58同城、赶集网这些大型网站,都会有全国分站点选择功能,可以供用户直接选择自己所在的城市,进入对应的分站站点。这个教程跟大家介绍一下如何制作网站的全国分站点选择功能。效果如下图:

如何制作网站全国分站点选择功能

制作这样的全国分站点功能需要使用JS代码进行全国城市的调用。这个功能与之前制作网站上全国城市二级联动选择功能特别相似。下面将这种全国分站点功能代码分享出来。

首先是HTML代码


<div class="meng" id="mengCity">
<div class="citySelectBackground">
<div class="ocha" id="ocha">×</div>
<div class="province" >
<li class="oc" style="background-color: #21AECB;color: white;">北京市</li>
<li class="oc">上海市</li>
<li class="oc">天津市</li>
<li class="oc">重庆市</li>
<li class="oc">河北</li>
<li class="oc">山西</li>
<li class="oc">内蒙古</li>
<li class="oc">辽宁</li>
<li class="oc">吉林</li>
<li class="oc">黑龙江</li>
<li class="oc">江苏</li>
<li class="oc">浙江</li>
<li class="oc">安徽</li>
<li class="oc">福建</li>
<li class="oc">江西</li>
<li class="oc">山东</li>
<li class="oc">河南</li>
<li class="oc">湖北</li>
<li class="oc">湖南</li>
<li class="oc">广东</li>
<li class="oc">广西</li>
<li class="oc">海南</li>
<li class="oc">四川</li>
<li class="oc">贵州</li>
<li class="oc">云南</li>
<li class="oc">西藏</li>
<li class="oc">陕西</li>
<li class="oc">甘肃</li>
<li class="oc">青海</li>
<li class="oc">宁夏</li>
<li class="oc">新疆</li>
<li class="oc">台湾</li>
<li class="oc">香港</li>
<li class="oc">国外</li>
</div>
<div class="city" id="oCity"></div>
<div class="osubmit quer" id="quer">确认</div>
</div>
</div>
<!-- 不是蒙版层 -->
<div>
<li class="one">城市:</li>
<li class="er">
<input class="erText" id="citySelect" value="请选择" disabled />
<div id="citySelectBtn" class="erbtn2">请选择</div>
</li>
</div>

JS代码:


<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
// 省份城市的联动
var oC=document.getElementsByClassName('oc');
var oCity=document.getElementById('oCity');
var city = [];//申明
//定义二级数据
city[0] = ['东城区','西城区','朝阳区','丰台区','石景山区','海淀区','门头沟区','房山区','通州区','顺义区','昌平区','大兴区','怀柔区','平谷区','密云区','延庆区'];
city[1] = ['和平区','河东区','河西区','南开区','河北区','红桥区','东丽区','西青区','津南区','北辰区','武清区','宝坻区','滨海新区','宁河区','静海区','蓟州区'];
city[2] = ['黄浦区','徐汇区','长宁区','静安区','普陀区','虹口区','杨浦区','闵行区','宝山区','嘉定区','浦东新区','金山区','松江区','青浦区','奉贤区','崇明区'];
city[3] = ['万州区','涪陵区','渝中区','大渡口区','江北区','沙坪坝区','九龙坡区','南岸区','北碚区','綦江区','大足区','渝北区','巴南区','黔江区','长寿区','江津区','合川区','永川区','南川区','璧山区','铜梁区','潼南区','荣昌区','开州区','梁平区','丰都县','垫江县','武隆区','忠县','云阳县','奉节县','巫山县','巫溪县','石柱土家族自治县','秀山土家族苗族自治县','酉阳土家族苗族自治县','彭水苗族土家族自治县']
city[4] = ['石家庄市','唐山市','秦皇岛市','邯郸市','邢台市','保定市','张家口市','承德市','沧州市','廊坊市','衡水市'];
city[5] = ['太原市','大同市','阳泉市','长治市','晋城市','朔州市','晋中市','运城市','忻州市','临汾市','吕梁市'];
city[6] = ['呼和浩特市','包头市','乌海市','赤峰市','通辽市','鄂尔多斯市','呼伦贝尔市','巴彦淖尔市','乌兰察布市','兴安盟','锡林郭勒盟','阿拉善盟'];
city[7] = ['沈阳市','大连市','鞍山市','抚顺市','本溪市','丹东市','锦州市','营口市','阜新市','辽阳市','盘锦市','铁岭市','朝阳市','葫芦岛市'];
city[8] = ['长春市','吉林市','四平市','辽源市','通化市','白山市','松原市','白城市','延边朝鲜族自治州'];
city[9] = ['哈尔滨市','齐齐哈尔市','鸡西市','鹤岗市','双鸭山市','大庆市','伊春市','佳木斯市','七台河市','牡丹江市','黑河市','绥化市','大兴安岭地区'];
city[10] = ['南京市','无锡市','徐州市','常州市','苏州市','南通市','连云港市','淮安市','盐城市','扬州市','镇江市','泰州市','宿迁市'];
city[11] = ['杭州市','宁波市','温州市','嘉兴市','湖州市','绍兴市','金华市','衢州市','舟山市','台州市','丽水市'];
city[12] = ['合肥市','芜湖市','蚌埠市','淮南市','马鞍山市','淮北市','铜陵市','安庆市','黄山市','滁州市','阜阳市','宿州市','六安市','亳州市','池州市','宣城市'];
city[13] = ['福州市','厦门市','莆田市','三明市','泉州市','漳州市','南平市','龙岩市','宁德市'];
city[14] = ['南昌市','景德镇市','萍乡市','九江市','新余市','鹰潭市','赣州市','吉安市','宜春市','抚州市','上饶市'];
city[15] = ['济南市','青岛市','淄博市','枣庄市','东营市','烟台市','潍坊市','济宁市','泰安市','威海市','日照市','莱芜市','临沂市','德州市','聊城市','滨州市','菏泽市'];
city[16] = ['郑州市','开封市','洛阳市','平顶山市','安阳市','鹤壁市','新乡市','焦作市','濮阳市','许昌市','漯河市','三门峡市','南阳市','商丘市','信阳市','周口市','驻马店市','济源市'];
city[17] = ['武汉市','黄石市','十堰市','宜昌市','襄阳市','鄂州市','荆门市','孝感市','荆州市','黄冈市','咸宁市','随州市','恩施土家族苗族自治州','仙桃市','潜江市','天门市','神农架林区'];
city[18] = ['长沙市','株洲市','湘潭市','衡阳市','邵阳市','岳阳市','常德市','张家界市','益阳市','郴州市','永州市','怀化市','娄底市','湘西土家族苗族自治州'];
city[19] = ['广州市','韶关市','深圳市','珠海市','汕头市','佛山市','江门市','湛江市','茂名市','肇庆市','惠州市','梅州市','汕尾市','河源市','阳江市','清远市','东莞市','中山市','潮州市','揭阳市','云浮市'];
city[20] = ['南宁市','柳州市','桂林市','梧州市','北海市','防城港市','钦州市','贵港市','玉林市','百色市','贺州市','河池市','来宾市','崇左市'];
city[21] = ['海口市','三亚市','三沙市','儋州市','五指山市','琼海市','文昌市','万宁市','东方市','定安县','屯昌县','澄迈县','临高县','白沙黎族自治县','昌江黎族自治县','乐东黎族自治县','陵水黎族自治县','保亭黎族苗族自治县','琼中黎族苗族自治县'];
city[22] = ['成都市','自贡市','攀枝花市','泸州市','德阳市','绵阳市','广元市','遂宁市','内江市','乐山市','南充市','眉山市','宜宾市','广安市','达州市','雅安市','巴中市','资阳市','阿坝藏族羌族自治州','甘孜藏族自治州','凉山彝族自治州'];
city[23] = ['贵阳市','六盘水市','钟山区','遵义市','安顺市','毕节市','铜仁市','黔西南布依族苗族自治州','黔东南苗族侗族自治州','黔南布依族苗族自治州'];
city[24] = ['昆明市','曲靖市','玉溪市','保山市','昭通市','丽江市','普洱市','临沧市','楚雄彝族自治州','红河哈尼族彝族自治州','文山壮族苗族自治州','西双版纳傣族自治州','大理白族自治州','德宏傣族景颇族自治州','怒江傈僳族自治州','迪庆藏族自治州'];
city[25] = ['拉萨市','日喀则市','昌都市','林芝市','山南市','那曲市','阿里地区'];
city[26] = ['西安市','铜川市','宝鸡市','咸阳市','渭南市','延安市','汉中市','榆林市','安康市','商洛市'];
city[27] = ['嘉峪关市','金昌市','白银市','天水市','武威市','张掖市','平凉市','酒泉市','庆阳市','定西市','陇南市','临夏回族自治州甘南藏族自治州'];
city[28] = ['西宁市','海东市','海北藏族自治州','黄南藏族自治州','海南藏族自治州','果洛藏族自治州','玉树藏族自治州','海西蒙古族藏族自治州'];
city[29] = ['银川市','石嘴山市','吴忠市','固原市','中卫市'];
city[30] = ['乌鲁木齐市','克拉玛依市','吐鲁番市','哈密市','昌吉回族自治州','博尔塔拉蒙古自治州','巴音郭楞蒙古自治州','阿克苏地区','克孜勒苏柯尔克孜自治州','喀什地区','和田地区','伊犁哈萨克自治州','塔城地区','阿勒泰地区','石河子市','阿拉尔市','图木舒克市','五家渠市','北屯市','铁门关市','双河市','可克达拉市','昆玉市'];
city[31] = [];
city[32] = [];
city[33] = [];
// 调用城市选择的函数
// 样式的改变
for(var p=0;p<oC.length;p++){
oC[p].indexx=p;
oC[p].onclick=function(){
func(this.indexx);
this.style.backgroundColor = "#21AECB";
this.style.color = "white";
for(var j=0;j<oC.length;j++){
if(j!=this.indexx){
oC[j].style.backgroundColor = "white";
oC[j].style.color = "#21AECB";
}
}
}
}
// 把城市刷出来
function func(m){
oCity.innerHTML="";
for (var i = 0; i < city[m].length; i++) {
//创建一个option 把数据存储在option
var op = new Option(city[m][i],i);
op.className='cityclass';
oCity.append(op);
};
getCityName();
}
func(0);
// 把选择的城市的数据传给一个input
var citySelect=document.getElementById('citySelect');
function getCityName(){
var cityEach=document.getElementsByClassName('cityclass');
for(var q=0;q<cityEach.length;q++){
// 传递数据
cityEach[q].indexx=q;
cityEach[q].onclick=function(){
citySelect.value=this.innerHTML;
// 改变样式
this.style.backgroundColor = "#21AECB";
this.style.color = "white";
for(var j=0;j<cityEach.length;j++){
if(j!=this.indexx){
cityEach[j].style.backgroundColor = "white";
cityEach[j].style.color = "#21AECB";
}
}
}
}
}
getCityName();

// 调用城市选择的蒙版层
$("#ocha").click(function(){
$("#mengCity").css("display","none");
})
$("#quer").click(function(){
$("#mengCity").css("display","none");
})
$("#citySelectBtn").click(function(){
$("#mengCity").css("display","block");
})

</script>

CSS样式代码:


<style type="text/css">
li{
list-style: none;
display: inline-block;
margin-top: 20px;
}
.meng{
width: 100%;
height: 100%;
background-color: rgba(39,40,34,0.8);
position: fixed;
z-index: 99;
display: none;
}
.citySelectBackground{
width: 600px;
height: 400px;
position: absolute;
left: 50%;

margin-left: -300px;
margin-top: 100px;
background-color: white;
}
.osubmit{
width: 100px;
height: 30px;
background-color: rgb(51,133,255);
border: none;
cursor: pointer;
margin-top: 20px;
color: white;

}
.province{
width: 200px;
margin-top: 30px;
margin-left: 30px;
/* background-color: pink;*/
height: 300px;
overflow: auto;

display: inline-block;
}
.province li{
list-style: none;
width: 200px;
height: 30px;
color: #21AECB;
cursor: pointer;
/* background-color: yellow;*/
line-height: 30px;

font-size: 17px;
text-align: center;
margin-top: 5px;
}
.province li:hover{
background-color: #21AECB;
color: white;
}
.city{
width: 300px;
margin-top: 30px;
margin-left: 30px;
/* background-color: pink;*/
height: 300px;
overflow: auto;
display: inline-block;
}
.city option{

/* width: 100%;*/
height: 30px;
color: #21AECB;
cursor: pointer;
/* background-color: yellow;*/
line-height: 30px;
font-size: 17px;
margin-top: 5px;
}
.city option:hover{
background-color: #21AECB;
color: white;
}
.ocha{
position: absolute;
font-size: 20px;
top: 5px;
cursor: pointer;
right: 10px;
width: 20px;
display: inline-block;
}
.quer{
margin: 0 auto;
margin-top: 20px;
text-align: center;
line-height: 30px;
}
.one{
width: 80px;
}
.er{
width: 300px;
/*overflow: auto;*/
}
.er textarea{
width: 400px;
height: 100px;
vertical-align: top;
}
.er img{
vertical-align: top;
width: 400px;
height: 200px;
}
.erbtn{
width: 200px;
cursor: pointer;
}
.erbtn2{
width: 80px;
height: 32px;
margin: 0px;
background-color: rgb(51,133,255);
display: inline-block;
position: relative;
/* top: -5px;*/
color: white;
cursor: pointer;
text-align: center;
line-height: 30px;
left: -5px;
}
.erbtn2:hover{
background-color: #33B0FF;

}
.erText{

width: 200px;
height: 30px;
}
</style>

以上就是制作网站全国分站点选择功能全部代码,如果正想制作全国分站点的同学,可以试一下。

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 零基础新手要学习网站建设,以下的网站建设教程是零基础新手必须学习的网站制作教程。只有将以下的基础知识学会了,才能为以后建网站打下坚实的基础。
  • 这是一家上海电气公司网站,网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO,网站导航制作使用全屏宽度菜单,每个菜单项宽
  • 广州全璟皮革制品有限公司网站,本公司是一家细致印花厂家,集数码印花、服装印花、数码直喷、印花加工等设计、生产、销售。全璟数码印花公司网站由
  • 什么是全国城市二级联动选择功能?全国城市二级联动选择功能在很多有全国各地城市分站的网站上很常见,用户可以选择自己想要到达的城市进入对应城
  • 这篇文章为大家详细介绍了基于javascript实现全国省市二级联动下拉菜单,文中示例代码介绍的特别详细,具有一定的参考价值,感兴趣的小伙伴们可以参考
  • 像58同城、赶集网这些大型网站,都会有全国分站点选择功能,可以供用户直接选择自己所在的城市,进入对应的分站站点。这个教程跟大家介绍一下如何制作
  • 多站点 (Multisite) 功能是 WordPress 3.0  版本的一个重要更新,整合了 WordPress MU 内核。后台自动升级内核后,无法直接使用该功能。需要通过手工
  • 使用wordpress程序建网站的学员,总是容易出现错误,而且有些错误会让你手足无措。比如你修改了网站的地址。当你把wordpress程序站点地址改掉,然
  • 这里的站点统计列表,并不是之前讲的如何给网站添加统计代码,而今天讲的统计列表是指统计网站文章数目、评论数目、友链数等11个统计数据。下
  • 对于有条件的学员,在做网站的时候,可以选择服务器来存储自己网站的内容,这样打开速度快,反应敏捷。对于网站服务器来说,一般空间商会按照其性
  • 对于学建网站,首先必须有自己的网站域名,如何选择适合自己的网站域名呢?【相关教程:如何购买域名和空间】选择域名三要素: 域名要简单、
  • 问:购买虚拟空间Windows和Linux怎么选择啊!那个好些!答:根据网站程序的不同选择不同的服务器空间,ASP---WINDOWS  php---LINUX。通常我们在建
  • wordpress评论功能可以让用户在我们自己的网站上进行对文章的评论,发表自己的观点,很好的增强了网站与用户之间的交互性。还有的网站还添加了邮件功
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点