jQuery實現TAB風格的全國省份城市滑動切換效果代碼
更新時間：2015年08月24日 17:31:44 作者：企鵝
這篇文章主要介紹了jQuery實現TAB風格的全國省份城市滑動切換效果代碼,涉及jquery鼠標mouseover事件及頁面元素遍歷的相關技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了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="#">畢節(jié)</a>
<a href="#">霸州</a>
<a href="#">巴中</a>
<a href="#">白山</a>
<a href="#">保山</a>
<a href="#">百色</a>
<a href="#">巴彥淖爾</a>
<a href="#">白銀</a>
<a href="#">亳州</a>
<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="#">?？?lt;/a>
<a href="#">葫蘆島</a>
<a href="#">菏澤</a>
<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="#">景德鎮(zhèn)</a>
<a href="#">晉城</a>
<a href="#">江門</a>
<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="#">萍鄉(xiāng)</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="#">桐鄉(xiāng)</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="#">新鄉(xiāng)</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="#">中衛(wèi)</a>
<a href="#">張掖</a>
<a href="#">張家界</a>
<a href="#">諸城</a>
<a href="#">資陽</a>
<a href="#">遵義</a>
<a href="#">舟山</a>
<a href="#">張家口</a>
<a href="#">張家港</a>
<a href="#">漳州</a>
<a href="#">棗莊</a>
<a href="#">珠海</a>
<a href="#">淄博</a>
<a href="#">自貢</a>
<a href="#">駐馬店</a>
<a href="#">株洲</a>
<a href="#">肇慶</a>
<a href="#">鎮(zhèn)江</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程序設計有所幫助。
相關文章
用jQuery實現一些導航條切換,顯示隱藏的實例代碼，需要的朋友可以參考一下2013-06-06
這篇文章介紹了jquery實現select多選框的左右移動的方法，有需要的朋友可以參考一下2013-07-07
這篇文章主要介紹了JQuery發(fā)送ajax請求時中文亂碼問題解決,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-11-11
JQuery，是輕量級的js庫,把繁瑣的js代碼封裝，使調用更簡單，完成更多功能。同樣，封裝了js利用XMLHttpRequest實現的異步刷新.2011-03-03
這篇文章主要介紹了jQuery中get()方法用法,實例分析了get()方法返回匹配集合DOM元素的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
jQuery使用中可能被XSS攻擊的一些危險環(huán)節(jié)提醒
XSS指的是跨站腳本攻擊,比如人們常說的向$傳入字符串或者字符串轉換可執(zhí)行函數等一些安全方面值得注意的細節(jié),下面就為大家整理了jQuery使用中可能被XSS攻擊的一些危險環(huán)節(jié)提醒2016-05-05
下面小編就為大家?guī)硪黄猨Query文字橫向滾動效果的實現代碼。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
事件是腳本編程的靈魂,本篇來介紹jQuery中的事件處理及事件對象.這里整理了詳細的代碼,有需要的小伙伴可以參考下。2016-10-10
這篇文章主要介紹了jQuery解析XML 實例詳解的相關資料,需要的朋友可以參考下2016-09-09
這篇文章主要為大家詳細介紹了利用jQuery實現輪播圖效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08