本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
