jQuery實現省份城市滑動切換（附程式碼）

這次帶給大家jQuery實現省份城市滑動切換（附程式碼），jQuery實現省份城市滑動切換的注意事項有哪些，下面就是實戰案例，一起來看一下。

這裡示範jQuery實現的全國省市菜單，加入了選項卡風格，把全國城市按字母範圍歸類，滑鼠移到某一分類的時候，滑動門展開顯示所屬的全國省分和城市。特別適合分類資訊網站使用。當然，需要選擇省市的時候，也是可以用的。仔細看了下，菜單裡面的城市還比較全，你不用再手動加入城市了。

運行效果截圖如下：

具體程式碼如下：

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<title></title>
<style>
*{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></script>
<script>
$(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>


<p>
 </p><p>
  <input>
  </p>

   
• 热门
   
• A~G
   
• H~L
   
• M~T
   
• W~Z
  

   

  

   

    北京     上海     广州     深圳     杭州     南京     成都     重庆    

  

  

   

A

   

    安宁     安康     安顺     安阳     安庆     鞍山    

   

B

   

    毕节     霸州     巴中     白山     保山     百色     巴彦淖尔     白银     亳州     北海     本溪     蚌埠     保定     滨州     包头     宝鸡     北京    

   

C

   

    从化     长葛     赤壁     承德     昌吉     池州     巢湖     长治     赤峰     潮州     滁州     沧州     常熟     郴州     常德     常州     长春     长沙     楚雄     慈溪     成都     重庆    

   

D

   

    敦煌     大丰     都匀     东阳     东港     迪庆     丹江口     大石桥     丹阳     定西     都江堰     达州     大同     大庆     丹东     德州     德阳     东营     大理     大连     东莞    

   

E

   

    鄂尔多斯     鄂州     恩施    

   

F

   

    福建     福清     阜阳     抚州     防城港     阜新     抚顺     富阳     佛山     福州    

   

G

   

    盖州     固原     高邮     广汉     贵港     赣州     贵阳     桂林     广州    

  

  

   

H

   

    华蓥     侯马     鹤山     洪湖     怀化     淮北     衡水     河池     鹤岗     海门     鹤壁     海安     黄冈     汉中     贺州     呼伦贝尔     黄石     河源     黄山     淮南     邯郸     淮安     海口     葫芦岛     菏泽     衡阳     合肥     湖州     哈尔滨     红河     惠州     呼和浩特     杭州    

   

J

   

    晋江     吉林     金坛     即墨     吉安     晋中     句容     酒泉     胶州     嘉峪关     鸡西     荆门     荆州     济源     锦州     焦作     揭阳     江阴     景德镇     晋城     江门     济南     佳木斯     济宁     九江     靖江     建德     金华     嘉兴    

   

K

   

    喀什     凯里     开平     开封     昆山     昆明    

   

L

   

    利川     乐平     临清     龙口     龙泉     吕梁     拉萨     丽江     临沧     陇南     漯河     辽阳     莱阳     临海     六盘水     耒阳     辽源     六安     临安     溧阳     泸州     龙岩     丽水     连云港     临沂     柳州     莱芜     聊城     乐山     临汾     洛阳     廊坊     娄底     兰州    

  

  

   

M

   

    麻城     眉山     梅州     茂名     牡丹江     绵阳     马鞍山    

   

N

   

    宁国     南平     宁德     内江     南充     南阳     南昌     南京     南宁     宁波     南通    

   

P

   

    普洱     邳州     平凉     攀枝花     萍乡     盘锦     濮阳     平顶山     莆田    

   

Q

   

    青州     琼海     曲靖     潜江     钦州     迁安     启东     齐齐哈尔     秦皇岛     泉州     清远     青岛     衢州    

   

R

   

    仁怀     如皋     日照     瑞安    

   

S

   

    什邡     尚志     寿光     三河市     韶山     上虞     宿州     汕尾     商洛     射阳     绥化     随州     三门峡     石嘴山     四平     遂宁     石河子     松原     上饶     韶关     三亚     十堰     商丘     宿迁     汕头     邵阳     三明     绍兴     苏州     石家庄     深圳     沈阳     上海    

   

T

   

    泰兴     铜仁     通辽     铜川     铁岭     天门     通化     天水     滕州     铜陵     桐乡     泰安     泰州     台州     唐山     太原     天津    

  

  

   

W

   

    乌兰浩特     乌海     武威     渭南     乌鲁木齐     芜湖     温州     吴江     潍坊     威海     无锡     梧州     武汉    

   

X

   

    西昌     兴城     湘西     西双版纳     仙桃     咸宁     许昌     孝感     宣城     新余     信阳     咸阳     西宁     湘潭     新乡     襄阳     邢台     厦门     徐州     西安    

   

Y

   

    兖州     余姚     义乌     玉林     云浮     鹰潭     扬中     玉溪     益阳     永州     延安     宜宾     宜春     延边     榆林     岳阳     宜兴     运城     银川     盐城     伊犁     营口     阳泉     宜昌     扬州     阳江     仪征     烟台    

   

Z

   

    邹城     中卫     张掖     张家界     诸城     资阳     遵义     舟山     张家口     张家港     漳州     枣庄     珠海     淄博     自贡     驻马店     株洲     肇庆     镇江     中山     郑州     湛江     周口    

  

 

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

建議閱讀：

tablesorter外掛程式使用詳解（附案例）

jQuery實作有幻燈效果tab滑動切換選單

#

以上是jQuery實現省份城市滑動切換（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！