L'exemple de cet article décrit l'implémentation jQuery du code d'effet de commutation coulissante de style TAB pour les provinces et les villes du pays. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Voici une démonstration du menu national des provinces et des villes implémenté par jQuery. Il ajoute un style d'onglet et classe les villes à travers le pays par plage de lettres. Lorsque la souris se déplace vers une certaine catégorie, la porte coulissante s'agrandit pour afficher les provinces. et les villes à travers le pays. Particulièrement adapté aux sites Web d’informations classifiées. Bien entendu, il peut également être utilisé lorsque vous devez sélectionner une province ou une ville. Après y avoir regardé de plus près, les villes du menu sont relativement complètes et vous n'avez pas besoin d'ajouter des villes manuellement.
La capture d'écran de l'effet en cours d'exécution est la suivante :
L'adresse de la démo en ligne est la suivante :
http://demo.jb51.net/js/2015/jquery-tab-cha-city-menu-style-codes/
Le code spécifique est le suivant :
<!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>
J'espère que cet article sera utile à la conception de la programmation jquery de chacun.