这次给大家带来jQuery实现省份城市滑动切换（附代码），jQuery实现省份城市滑动切换的注意事项有哪些，下面就是实战案例，一起来看一下。
这里演示jQuery实现的全国省市菜单，加入了选项卡风格，把全国城市按字母范围归类，鼠标移到某一分类的时候，滑动门展开显示所属的全国省分和城市。特别适合于分类信息网站使用。当然，在需要选择省市的时候，也是可以用的。仔细看了下，菜单里面的城市还比较全，你不用再手动添加城市了。
运行效果截图如下：
具体代码如下：
*{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;}$(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(); }) });});
- 热门
- 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
- 邹城 中卫 张掖 张家界 诸城 资阳 遵义 舟山 张家口 张家港 漳州 枣庄 珠海 淄博 自贡 驻马店 株洲 肇庆 镇江 中山 郑州 湛江 周口
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
tablesorter插件使用详解（附案例）
jQuery实现有幻灯效果tab滑动切换菜单
以上就是jQuery实现省份城市滑动切换（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2767391.html
