首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 24, 2015

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

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

运行效果截图如下：

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

在线演示地址如下：

具体代码如下：

<!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程序设计有所帮助。

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
各种常用的JS函数整理
Oct 25 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
jQuery复制节点用法示例(clone方法)
Sep 08 Javascript
angularJS之$http：与服务器交互示例
Mar 17 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
Sep 05 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 #Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 #Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 #Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 #Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 #Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 #Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 #Javascript
while(1) 事件调度器(1) 无限迭代(1) re模块(2) 分词器(1) sched(1) okenizer(1) watch(1) scss(1) 监听(2)
You might like
实用函数4
2007/11/08 PHP
php curl 登录163邮箱并抓取邮箱好友列表的代码（经测试）
2011/04/07 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
javascript实现图像循环明暗变化的方法
2015/02/25 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
微信小程序实现留言板
2018/10/31 Javascript
js数组去重的方法总结
2019/01/18 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
python批量同步web服务器代码核心程序
2014/09/01 Python
python中字典dict常用操作方法实例总结
2015/04/04 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
浅析Python中的多条件排序实现
2016/06/07 Python
Python中enumerate函数代码解析
2017/10/31 Python
django框架ModelForm组件用法详解
2019/12/11 Python
python数据库操作mysql：pymysql、sqlalchemy常见用法详解
2020/03/30 Python
keras中的backend.clip用法
2020/05/22 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
ASOS比利时：英国线上零售商及自有品牌
2018/07/29 全球购物
伦敦一卡通：The London Pass
2018/11/30 全球购物
公司口号大全
2014/06/11 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
红旗渠导游词
2015/02/09 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书