This time I will bring you jQuery to realize sliding switching of provinces and cities (with code). What are the precautions for jQuery to realize sliding switching of provinces and cities. The following is a practical case, let's take a look.
Here is a demonstration of the national province and city menu implemented by jQuery. A tab style is added to classify the cities across the country by letter range. When the mouse is moved to a certain category, the sliding door expands to display the national provinces and provinces to which it belongs. City. Especially suitable for classified information websites. Of course, it can also be used when you need to select a province or city. After looking carefully, the cities in the menu are relatively complete, and you don’t need to add cities manually.
The screenshot of the running effect is as follows:
The specific code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
*{margin:0;padding:0;border:0;font-size:12px;}
a{text-decoration:none;}
ul,li,ol,dl,dt,dd{list-style:none;}
.cityList{display:block;position:absolute;left:20px;top:20px;width:676px;border:2px solid #B91313;background:white;z-index:1;overflow:hidden;font-family:arial,"宋体";overflow:hidden;}
.cityList .title{background-color:#F4F4F4;width:100%;padding-top:10px;padding-left:16px;overflow:hidden;position:relative;}
.cityList .cityTopSearch{float:left;width:228px;height:25px;line-height:25px;margin-right:38px;padding:0 2px;display:inline;border:1px solid #E6DFDE;color:#5e5e5e;}
.cityList ul.titleChar{list-style:none;cursor:default;}
.cityList .titleChar .on{border-color:#E6DFDE;background-color:white;}
.cityList .titleChar li{float:left;border:1px solid #F4F4F4;border-bottom:0;padding:6px 24px;}
.cityList .cityListBox{margin:8px 0 0 16px;color:#686868;overflow:hidden;display:inline-block;_position:relative;}
.cityListBox dl{position:relative;overflow:hidden;zoom:1;}
cityListBox .hotCity dd{width:650px;}
.cityListBox dl dt{float:left;width:20px;height:auto;display:block;line-height:25px;}
.cityListBox dl dd{float:left;line-height:25px;_padding-top:2px;text-align:left;width:640px;margin-bottom:6px;}
.cityListBox dl dd a{color:#686868;}
.cityListBox dl dd a:hover{color:#990000;text-decoration:underline;}
.cityListBox a{width:55px;display:inline-block;}
.none{display:none;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$change_li = $(".titleChar li");
$change_li.each(function(i){
$(this).mouseover(function(){
$(this).addClass("on").siblings().removeClass("on");
$(".cityListBox dl").eq(i).show().siblings().hide();
})
});
});
</script>
</head>
<body>
<p class="cityList">
<p class="title">
<input type="text" id="" class="cityTopSearch" value="请输入城市或城市拼音" maxlength="15" />
<ul class="titleChar">
<li class="on">热门</li>
<li>A~G</li>
<li>H~L</li>
<li>M~T</li>
<li>W~Z</li>
</ul>
</p>
<p class="cityListBox">
<dl class="hotCity">
<dd>
<a href="#">北京</a>
<a href="#">上海</a>
<a href="#">广州</a>
<a href="#">深圳</a>
<a href="#">杭州</a>
<a href="#">南京</a>
<a href="#">成都</a>
<a href="#">重庆</a>
</dd>
</dl>
<dl class="none">
<dt>A</dt>
<dd>
<a href="#">安宁</a>
<a href="#">安康</a>
<a href="#">安顺</a>
<a href="#">安阳</a>
<a href="#">安庆</a>
<a href="#">鞍山</a>
</dd>
<dt>B</dt>
<dd>
<a href="#">毕节</a>
<a href="#">霸州</a>
<a href="#">巴中</a>
<a href="#">白山</a>
<a href="#">保山</a>
<a href="#">百色</a>
<a href="#">巴彦淖尔</a>
<a href="#">白银</a>
<a href="#">亳州</a>
<a href="#">北海</a>
<a href="#">本溪</a>
<a href="#">蚌埠</a>
<a href="#">保定</a>
<a href="#">滨州</a>
<a href="#">包头</a>
<a href="#">宝鸡</a>
<a href="#">北京</a>
</dd>
<dt>C</dt>
<dd>
<a href="#">从化</a>
<a href="#">长葛</a>
<a href="#">赤壁</a>
<a href="#">承德</a>
<a href="#">昌吉</a>
<a href="#">池州</a>
<a href="#">巢湖</a>
<a href="#">长治</a>
<a href="#">赤峰</a>
<a href="#">潮州</a>
<a href="#">滁州</a>
<a href="#">沧州</a>
<a href="#">常熟</a>
<a href="#">郴州</a>
<a href="#">常德</a>
<a href="#">常州</a>
<a href="#">长春</a>
<a href="#">长沙</a>
<a href="#">楚雄</a>
<a href="#">慈溪</a>
<a href="#">成都</a>
<a href="#">重庆</a>
</dd>
<dt>D</dt>
<dd>
<a href="#">敦煌</a>
<a href="#">大丰</a>
<a href="#">都匀</a>
<a href="#">东阳</a>
<a href="#">东港</a>
<a href="#">迪庆</a>
<a href="#">丹江口</a>
<a href="#">大石桥</a>
<a href="#">丹阳</a>
<a href="#">定西</a>
<a href="#">都江堰</a>
<a href="#">达州</a>
<a href="#">大同</a>
<a href="#">大庆</a>
<a href="#">丹东</a>
<a href="#">德州</a>
<a href="#">德阳</a>
<a href="#">东营</a>
<a href="#">大理</a>
<a href="#">大连</a>
<a href="#">东莞</a>
</dd>
<dt>E</dt>
<dd>
<a href="#">鄂尔多斯</a>
<a href="#">鄂州</a>
<a href="#">恩施</a>
</dd>
<dt>F</dt>
<dd>
<a href="#">福建</a>
<a href="#">福清</a>
<a href="#">阜阳</a>
<a href="#">抚州</a>
<a href="#">防城港</a>
<a href="#">阜新</a>
<a href="#">抚顺</a>
<a href="#">富阳</a>
<a href="#">佛山</a>
<a href="#">福州</a>
</dd>
<dt>G</dt>
<dd>
<a href="#">盖州</a>
<a href="#">固原</a>
<a href="#">高邮</a>
<a href="#">广汉</a>
<a href="#">贵港</a>
<a href="#">赣州</a>
<a href="#">贵阳</a>
<a href="#">桂林</a>
<a href="#">广州</a>
</dd>
</dl>
<dl class="none">
<dt>H</dt>
<dd>
<a href="#">华蓥</a>
<a href="#">侯马</a>
<a href="#">鹤山</a>
<a href="#">洪湖</a>
<a href="#">怀化</a>
<a href="#">淮北</a>
<a href="#">衡水</a>
<a href="#">河池</a>
<a href="#">鹤岗</a>
<a href="#">海门</a>
<a href="#">鹤壁</a>
<a href="#">海安</a>
<a href="#">黄冈</a>
<a href="#">汉中</a>
<a href="#">贺州</a>
<a href="#">呼伦贝尔</a>
<a href="#">黄石</a>
<a href="#">河源</a>
<a href="#">黄山</a>
<a href="#">淮南</a>
<a href="#">邯郸</a>
<a href="#">淮安</a>
<a href="#">海口</a>
<a href="#">葫芦岛</a>
<a href="#">菏泽</a>
<a href="#">衡阳</a>
<a href="#">合肥</a>
<a href="#">湖州</a>
<a href="#">哈尔滨</a>
<a href="#">红河</a>
<a href="#">惠州</a>
<a href="#">呼和浩特</a>
<a href="#">杭州</a>
</dd>
<dt>J</dt>
<dd>
<a href="#">晋江</a>
<a href="#">吉林</a>
<a href="#">金坛</a>
<a href="#">即墨</a>
<a href="#">吉安</a>
<a href="#">晋中</a>
<a href="#">句容</a>
<a href="#">酒泉</a>
<a href="#">胶州</a>
<a href="#">嘉峪关</a>
<a href="#">鸡西</a>
<a href="#">荆门</a>
<a href="#">荆州</a>
<a href="#">济源</a>
<a href="#">锦州</a>
<a href="#">焦作</a>
<a href="#">揭阳</a>
<a href="#">江阴</a>
<a href="#">景德镇</a>
<a href="#">晋城</a>
<a href="#">江门</a>
<a href="#">济南</a>
<a href="#">佳木斯</a>
<a href="#">济宁</a>
<a href="#">九江</a>
<a href="#">靖江</a>
<a href="#">建德</a>
<a href="#">金华</a>
<a href="#">嘉兴</a>
</dd>
<dt>K</dt>
<dd>
<a href="#">喀什</a>
<a href="#">凯里</a>
<a href="#">开平</a>
<a href="#">开封</a>
<a href="#">昆山</a>
<a href="#">昆明</a>
</dd>
<dt>L</dt>
<dd>
<a href="#">利川</a>
<a href="#">乐平</a>
<a href="#">临清</a>
<a href="#">龙口</a>
<a href="#">龙泉</a>
<a href="#">吕梁</a>
<a href="#">拉萨</a>
<a href="#">丽江</a>
<a href="#">临沧</a>
<a href="#">陇南</a>
<a href="#">漯河</a>
<a href="#">辽阳</a>
<a href="#">莱阳</a>
<a href="#">临海</a>
<a href="#">六盘水</a>
<a href="#">耒阳</a>
<a href="#">辽源</a>
<a href="#">六安</a>
<a href="#">临安</a>
<a href="#">溧阳</a>
<a href="#">泸州</a>
<a href="#">龙岩</a>
<a href="#">丽水</a>
<a href="#">连云港</a>
<a href="#">临沂</a>
<a href="#">柳州</a>
<a href="#">莱芜</a>
<a href="#">聊城</a>
<a href="#">乐山</a>
<a href="#">临汾</a>
<a href="#">洛阳</a>
<a href="#">廊坊</a>
<a href="#">娄底</a>
<a href="#">兰州</a>
</dd>
</dl>
<dl class="none">
<dt>M</dt>
<dd>
<a href="#">麻城</a>
<a href="#">眉山</a>
<a href="#">梅州</a>
<a href="#">茂名</a>
<a href="#">牡丹江</a>
<a href="#">绵阳</a>
<a href="#">马鞍山</a>
</dd>
<dt>N</dt>
<dd>
<a href="#">宁国</a>
<a href="#">南平</a>
<a href="#">宁德</a>
<a href="#">内江</a>
<a href="#">南充</a>
<a href="#">南阳</a>
<a href="#">南昌</a>
<a href="#">南京</a>
<a href="#">南宁</a>
<a href="#">宁波</a>
<a href="#">南通</a>
</dd>
<dt>P</dt>
<dd>
<a href="#">普洱</a>
<a href="#">邳州</a>
<a href="#">平凉</a>
<a href="#">攀枝花</a>
<a href="#">萍乡</a>
<a href="#">盘锦</a>
<a href="#">濮阳</a>
<a href="#">平顶山</a>
<a href="#">莆田</a>
</dd>
<dt>Q</dt>
<dd>
<a href="#">青州</a>
<a href="#">琼海</a>
<a href="#">曲靖</a>
<a href="#">潜江</a>
<a href="#">钦州</a>
<a href="#">迁安</a>
<a href="#">启东</a>
<a href="#">齐齐哈尔</a>
<a href="#">秦皇岛</a>
<a href="#">泉州</a>
<a href="#">清远</a>
<a href="#">青岛</a>
<a href="#">衢州</a>
</dd>
<dt>R</dt>
<dd>
<a href="#">仁怀</a>
<a href="#">如皋</a>
<a href="#">日照</a>
<a href="#">瑞安</a>
</dd>
<dt>S</dt>
<dd>
<a href="#">什邡</a>
<a href="#">尚志</a>
<a href="#">寿光</a>
<a href="#">三河市</a>
<a href="#">韶山</a>
<a href="#">上虞</a>
<a href="#">宿州</a>
<a href="#">汕尾</a>
<a href="#">商洛</a>
<a href="#">射阳</a>
<a href="#">绥化</a>
<a href="#">随州</a>
<a href="#">三门峡</a>
<a href="#">石嘴山</a>
<a href="#">四平</a>
<a href="#">遂宁</a>
<a href="#">石河子</a>
<a href="#">松原</a>
<a href="#">上饶</a>
<a href="#">韶关</a>
<a href="#">三亚</a>
<a href="#">十堰</a>
<a href="#">商丘</a>
<a href="#">宿迁</a>
<a href="#">汕头</a>
<a href="#">邵阳</a>
<a href="#">三明</a>
<a href="#">绍兴</a>
<a href="#">苏州</a>
<a href="#">石家庄</a>
<a href="#">深圳</a>
<a href="#">沈阳</a>
<a href="#">上海</a>
</dd>
<dt>T</dt>
<dd>
<a href="#">泰兴</a>
<a href="#">铜仁</a>
<a href="#">通辽</a>
<a href="#">铜川</a>
<a href="#">铁岭</a>
<a href="#">天门</a>
<a href="#">通化</a>
<a href="#">天水</a>
<a href="#">滕州</a>
<a href="#">铜陵</a>
<a href="#">桐乡</a>
<a href="#">泰安</a>
<a href="#">泰州</a>
<a href="#">台州</a>
<a href="#">唐山</a>
<a href="#">太原</a>
<a href="#">天津</a>
</dd>
</dl>
<dl class="none">
<dt>W</dt>
<dd>
<a href="#">乌兰浩特</a>
<a href="#">乌海</a>
<a href="#">武威</a>
<a href="#">渭南</a>
<a href="#">乌鲁木齐</a>
<a href="#">芜湖</a>
<a href="#">温州</a>
<a href="#">吴江</a>
<a href="#">潍坊</a>
<a href="#">威海</a>
<a href="#">无锡</a>
<a href="#">梧州</a>
<a href="#">武汉</a>
</dd>
<dt>X</dt>
<dd>
<a href="#">西昌</a>
<a href="#">兴城</a>
<a href="#">湘西</a>
<a href="#">西双版纳</a>
<a href="#">仙桃</a>
<a href="#">咸宁</a>
<a href="#">许昌</a>
<a href="#">孝感</a>
<a href="#">宣城</a>
<a href="#">新余</a>
<a href="#">信阳</a>
<a href="#">咸阳</a>
<a href="#">西宁</a>
<a href="#">湘潭</a>
<a href="#">新乡</a>
<a href="#">襄阳</a>
<a href="#">邢台</a>
<a href="#">厦门</a>
<a href="#">徐州</a>
<a href="#">西安</a>
</dd>
<dt>Y</dt>
<dd>
<a href="#">兖州</a>
<a href="#">余姚</a>
<a href="#">义乌</a>
<a href="#">玉林</a>
<a href="#">云浮</a>
<a href="#">鹰潭</a>
<a href="#">扬中</a>
<a href="#">玉溪</a>
<a href="#">益阳</a>
<a href="#">永州</a>
<a href="#">延安</a>
<a href="#">宜宾</a>
<a href="#">宜春</a>
<a href="#">延边</a>
<a href="#">榆林</a>
<a href="#">岳阳</a>
<a href="#">宜兴</a>
<a href="#">运城</a>
<a href="#">银川</a>
<a href="#">盐城</a>
<a href="#">伊犁</a>
<a href="#">营口</a>
<a href="#">阳泉</a>
<a href="#">宜昌</a>
<a href="#">扬州</a>
<a href="#">阳江</a>
<a href="#">仪征</a>
<a href="#">烟台</a>
</dd>
<dt>Z</dt>
<dd>
<a href="#">邹城</a>
<a href="#">中卫</a>
<a href="#">张掖</a>
<a href="#">张家界</a>
<a href="#">诸城</a>
<a href="#">资阳</a>
<a href="#">遵义</a>
<a href="#">舟山</a>
<a href="#">张家口</a>
<a href="#">张家港</a>
<a href="#">漳州</a>
<a href="#">枣庄</a>
<a href="#">珠海</a>
<a href="#">淄博</a>
<a href="#">自贡</a>
<a href="#">驻马店</a>
<a href="#">株洲</a>
<a href="#">肇庆</a>
<a href="#">镇江</a>
<a href="#">中山</a>
<a href="#">郑州</a>
<a href="#">湛江</a>
<a href="#">周口</a>
</dd>
</dl>
</p>
</p>
<p style="text-align:center;clear:both">
</p>
</body>
</html>I believe you have mastered the method after reading the case in this article, more Please pay attention to other related articles on the php Chinese website!
Recommended reading:
Detailed explanation of the use of tablesorter plug-in (with case)
The above is the detailed content of jQuery realizes sliding switching between provinces and cities (with code). For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
