本文实例讲述了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> <div> <input type="text" id="" value="请输入城市或城市拼音" maxlength="15" /> <ul> <li>热门</li> <li>A~G</li> <li>H~L</li> <li>M~T</li> <li>W~Z</li> </ul> </div> <div> <dl> <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> <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> <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> <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> <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> </div> </body> </html>
希望本文所述对大家的jquery程序设计有所帮助。
【jQuery实现TAB风格的全国省份城市滑动切换效果代码】相关文章：
★ Javascript实现的SHA-256加密算法完整实例