首页 > 编程 > JavaScript > 正文

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

2019-11-20 11:43:47
字体:
来源:转载
供稿:网友

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

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

运行效果截图如下:

在线演示地址如下:

http://demo.VeVB.COm/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程序设计有所帮助。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表