登录  /  注册
首页 > web前端 > js教程 > 正文

jQuery实现省份城市滑动切换(附代码)

php中世界最好的语言
发布: 2018-04-26 16:44:25
原创
3028人浏览过

这次给大家带来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实现省份城市滑动切换(附代码)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号