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

本文实例讲述了jQuery实现TAB风格的全国省份城市滑动切换效果代码。分享给大家供大家参考。具体如下：
这里演示jQuery实现的全国省市菜单，加入了选项卡风格，把全国城市按字母范围归类，鼠标移到某一分类的时候，滑动门展开显示所属的全国省分和城市。特别适合于分类信息网站使用。当然，在需要选择省市的时候，也是可以用的。仔细看了下，菜单里面的城市还比较全，你不用再手动添加城市了。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-tab-cha-city-menu-style-codes/
具体代码如下：
<！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>jQuery全国城市切换TAB选项卡</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><div class="cityList"> <div 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> </div> <div 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> </div></div><div style="text-align:center;clear:both"></div></body></html>
希望本文所述对大家的jquery程序设计有所帮助。