jQuery实现TAB风格的全国省份城市滑动切换效果代码

这篇文章主要介绍了jQuery实现TAB风格的全国省份城市滑动切换效果代码,涉及jquery鼠标mouseover事件及页面元素遍历的相关技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了jQuery实现TAB风格的全国省份城市滑动切换效果代码。分享给大家供大家参考。具体如下：

这里演示jQuery实现的全国省市菜单，加入了选项卡风格，把全国城市按字母范围归类，鼠标移到某一分类的时候，滑动门展开显示所属的全国省分和城市。特别适合于分类信息网站使用。当然，在需要选择省市的时候，也是可以用的。仔细看了下，菜单里面的城市还比较全，你不用再手动添加城市了。

运行效果截图如下：

在线演示地址如下：

http://demo.html.cn/js/2015/jquery-tab-cha-city-menu-style-codes/

具体代码如下：

    *{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;}    
 
热门
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
 邹城中卫张掖张家界诸城资阳遵义舟山张家口张家港漳州枣庄珠海淄博自贡驻马店株洲肇庆镇江中山郑州湛江周口
 

希望本文所述对大家的jquery程序设计有所帮助。

以上就是jQuery实现TAB风格的全国省份城市滑动切换效果代码的详细内容，更多请关注本站其它相关文章！