jQuery實(shí)現(xiàn)TAB風(fēng)格的全國(guó)省份城市滑動(dòng)切換效果代碼
更新時(shí)間：2015年08月24日 17:31:44 作者：企鵝
這篇文章主要介紹了jQuery實(shí)現(xiàn)TAB風(fēng)格的全國(guó)省份城市滑動(dòng)切換效果代碼,涉及jquery鼠標(biāo)mouseover事件及頁(yè)面元素遍歷的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)TAB風(fēng)格的全國(guó)省份城市滑動(dòng)切換效果代碼。分享給大家供大家參考。具體如下：
這里演示jQuery實(shí)現(xiàn)的全國(guó)省市菜單，加入了選項(xiàng)卡風(fēng)格，把全國(guó)城市按字母范圍歸類，鼠標(biāo)移到某一分類的時(shí)候，滑動(dòng)門(mén)展開(kāi)顯示所屬的全國(guó)省分和城市。特別適合于分類信息網(wǎng)站使用。當(dāng)然，在需要選擇省市的時(shí)候，也是可以用的。仔細(xì)看了下，菜單里面的城市還比較全，你不用再手動(dòng)添加城市了。
運(yùn)行效果截圖如下：
在線演示地址如下：
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全國(guó)城市切換TAB選項(xiàng)卡</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="請(qǐng)輸入城市或城市拼音" maxlength="15" />
<ul class="titleChar">
<li class="on">熱門(mén)</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="#">安陽(yáng)</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="#">長(zhǎng)葛</a>
<a href="#">赤壁</a>
<a href="#">承德</a>
<a href="#">昌吉</a>
<a href="#">池州</a>
<a href="#">巢湖</a>
<a href="#">長(zhǎng)治</a>
<a href="#">赤峰</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ǎng)春</a>
<a href="#">長(zhǎng)沙</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="#">東陽(yáng)</a>
<a href="#">東港</a>
<a href="#">迪慶</a>
<a href="#">丹江口</a>
<a href="#">大石橋</a>
<a href="#">丹陽(yáng)</a>
<a href="#">定西</a>
<a href="#">都江堰</a>
<a href="#">達(dá)州</a>
<a href="#">大同</a>
<a href="#">大慶</a>
<a href="#">丹東</a>
<a href="#">德州</a>
<a href="#">德陽(yáng)</a>
<a href="#">東營(yíng)</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="#">阜陽(yáng)</a>
<a href="#">撫州</a>
<a href="#">防城港</a>
<a href="#">阜新</a>
<a href="#">撫順</a>
<a href="#">富陽(yáng)</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="#">貴陽(yáng)</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="#">海門(mé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>
<a href="#">邯鄲</a>
<a href="#">淮安</a>
<a href="#">?？?lt;/a>
<a href="#">葫蘆島</a>
<a href="#">菏澤</a>
<a href="#">衡陽(yáng)</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="#">嘉峪關(guān)</a>
<a href="#">雞西</a>
<a href="#">荊門(mén)</a>
<a href="#">荊州</a>
<a href="#">濟(jì)源</a>
<a href="#">錦州</a>
<a href="#">焦作</a>
<a href="#">揭陽(yáng)</a>
<a href="#">江陰</a>
<a href="#">景德鎮(zhèn)</a>
<a href="#">晉城</a>
<a href="#">江門(mén)</a>
<a href="#">濟(jì)南</a>
<a href="#">佳木斯</a>
<a href="#">濟(jì)寧</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="#">開(kāi)平</a>
<a href="#">開(kāi)封</a>
<a href="#">昆山</a>
<a href="#">昆明</a>
</dd>
<dt>L</dt>
<dd>
<a href="#">利川</a>
<a href="#">樂(lè)平</a>
<a href="#">臨清</a>
<a href="#">龍口</a>
<a href="#">龍泉</a>
<a href="#">呂梁</a>
<a href="#">拉薩</a>
<a href="#">麗江</a>
<a href="#">臨滄</a>
<a href="#">隴南</a>
<a href="#">漯河</a>
<a href="#">遼陽(yáng)</a>
<a href="#">萊陽(yáng)</a>
<a href="#">臨海</a>
<a href="#">六盤(pán)水</a>
<a href="#">耒陽(yáng)</a>
<a href="#">遼源</a>
<a href="#">六安</a>
<a href="#">臨安</a>
<a href="#">溧陽(yáng)</a>
<a href="#">瀘州</a>
<a href="#">龍巖</a>
<a href="#">麗水</a>
<a href="#">連云港</a>
<a href="#">臨沂</a>
<a href="#">柳州</a>
<a href="#">萊蕪</a>
<a href="#">聊城</a>
<a href="#">樂(lè)山</a>
<a href="#">臨汾</a>
<a href="#">洛陽(yáng)</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="#">綿陽(yáng)</a>
<a href="#">馬鞍山</a>
</dd>
<dt>N</dt>
<dd>
<a href="#">寧國(guó)</a>
<a href="#">南平</a>
<a href="#">寧德</a>
<a href="#">內(nèi)江</a>
<a href="#">南充</a>
<a href="#">南陽(yáng)</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="#">平?jīng)?lt;/a>
<a href="#">攀枝花</a>
<a href="#">萍鄉(xiāng)</a>
<a href="#">盤(pán)錦</a>
<a href="#">濮陽(yáng)</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="#">清遠(yuǎn)</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="#">射陽(yáng)</a>
<a href="#">綏化</a>
<a href="#">隨州</a>
<a href="#">三門(mén)峽</a>
<a href="#">石嘴山</a>
<a href="#">四平</a>
<a href="#">遂寧</a>
<a href="#">石河子</a>
<a href="#">松原</a>
<a href="#">上饒</a>
<a href="#">韶關(guān)</a>
<a href="#">三亞</a>
<a href="#">十堰</a>
<a href="#">商丘</a>
<a href="#">宿遷</a>
<a href="#">汕頭</a>
<a href="#">邵陽(yáng)</a>
<a href="#">三明</a>
<a href="#">紹興</a>
<a href="#">蘇州</a>
<a href="#">石家莊</a>
<a href="#">深圳</a>
<a href="#">沈陽(yáng)</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="#">天門(mén)</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="#">臺(tái)州</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="#">無(wú)錫</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="#">信陽(yáng)</a>
<a href="#">咸陽(yáng)</a>
<a href="#">西寧</a>
<a href="#">湘潭</a>
<a href="#">新鄉(xiāng)</a>
<a href="#">襄陽(yáng)</a>
<a href="#">邢臺(tái)</a>
<a href="#">廈門(mén)</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="#">揚(yáng)中</a>
<a href="#">玉溪</a>
<a href="#">益陽(yáng)</a>
<a href="#">永州</a>
<a href="#">延安</a>
<a href="#">宜賓</a>
<a href="#">宜春</a>
<a href="#">延邊</a>
<a href="#">榆林</a>
<a href="#">岳陽(yáng)</a>
<a href="#">宜興</a>
<a href="#">運(yùn)城</a>
<a href="#">銀川</a>
<a href="#">鹽城</a>
<a href="#">伊犁</a>
<a href="#">營(yíng)口</a>
<a href="#">陽(yáng)泉</a>
<a href="#">宜昌</a>
<a href="#">揚(yáng)州</a>
<a href="#">陽(yáng)江</a>
<a href="#">儀征</a>
<a href="#">煙臺(tái)</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="#">資陽(yáng)</a>
<a href="#">遵義</a>
<a href="#">舟山</a>
<a href="#">張家口</a>
<a href="#">張家港</a>
<a href="#">漳州</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>
希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 使用jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左右按鈕滑動(dòng)切換
- jQuery插件Slider Revolution實(shí)現(xiàn)響應(yīng)動(dòng)畫(huà)滑動(dòng)圖片切換效果
- jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換(多種效果)小結(jié)
- jQuery控制元素顯示、隱藏、切換、滑動(dòng)的方法總結(jié)
- JQuery實(shí)現(xiàn)簡(jiǎn)單的圖片滑動(dòng)切換特效
- jQuery實(shí)現(xiàn)類似滑動(dòng)門(mén)切換效果的層切換
- multiSteps 基于Jquery的多步驟滑動(dòng)切換插件
- jQuery實(shí)現(xiàn)圖片與文字描述左右滑動(dòng)自動(dòng)切換的方法
- jQuery實(shí)現(xiàn)鼠標(biāo)滑動(dòng)切換圖片
相關(guān)文章
用jQuery實(shí)現(xiàn)一些導(dǎo)航條切換,顯示隱藏的實(shí)例代碼
用jQuery實(shí)現(xiàn)一些導(dǎo)航條切換,顯示隱藏的實(shí)例代碼，需要的朋友可以參考一下2013-06-06
jquery select多選框的左右移動(dòng) 具體實(shí)現(xiàn)代碼
這篇文章介紹了jquery實(shí)現(xiàn)select多選框的左右移動(dòng)的方法，有需要的朋友可以參考一下2013-07-07
JQuery發(fā)送ajax請(qǐng)求時(shí)中文亂碼問(wèn)題解決
這篇文章主要介紹了JQuery發(fā)送ajax請(qǐng)求時(shí)中文亂碼問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
基于JQuery實(shí)現(xiàn)異步刷新的代碼(轉(zhuǎn)載)
JQuery，是輕量級(jí)的js庫(kù),把繁瑣的js代碼封裝，使調(diào)用更簡(jiǎn)單，完成更多功能。同樣，封裝了js利用XMLHttpRequest實(shí)現(xiàn)的異步刷新.2011-03-03
這篇文章主要介紹了jQuery中g(shù)et()方法用法,實(shí)例分析了get()方法返回匹配集合DOM元素的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jQuery使用中可能被XSS攻擊的一些危險(xiǎn)環(huán)節(jié)提醒
XSS指的是跨站腳本攻擊,比如人們常說(shuō)的向$傳入字符串或者字符串轉(zhuǎn)換可執(zhí)行函數(shù)等一些安全方面值得注意的細(xì)節(jié),下面就為大家整理了jQuery使用中可能被XSS攻擊的一些危險(xiǎn)環(huán)節(jié)提醒2016-05-05
jQuery文字橫向滾動(dòng)效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jQuery文字橫向滾動(dòng)效果的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
事件是腳本編程的靈魂,本篇來(lái)介紹jQuery中的事件處理及事件對(duì)象.這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下。2016-10-10
這篇文章主要介紹了jQuery解析XML 實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要為大家詳細(xì)介紹了利用jQuery實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08