首页
所有分类
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 相关文章推荐
jQuery 2.0.3 源码分析之core（一）整体架构
May 27 Javascript
js数组依据下标删除元素
Apr 14 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
浅谈TypeScript 索引签名的理解
Oct 16 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
S500(1) 山进(2) Grundig(1) SANGEAN(1) ATS-909X(1) S400(1) H-501(1) PL990(2) S700(1) ICF-SW07(1)
You might like
《星际争霸重制版》兵种对比图鉴
2020/03/02 星际争霸
Windows下的PHP5.0详解
2006/11/18 PHP
PHP实现Socket服务器的代码
2008/04/03 PHP
PHP 批量删除 sql语句
2009/06/05 PHP
PHP 面向对象详解
2012/09/13 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
基于python的汉字转GBK码实现代码
2012/02/19 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
基于python绘制科赫雪花
2018/06/22 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
Python中如何添加自定义模块
2020/06/09 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
eBay奥地利站：eBay.at
2019/07/24 全球购物
英国Lookfantastic中文网站：护肤品美妆美发购物（英国直邮）
2020/04/27 全球购物
高一英语教学反思
2014/01/22 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
带薪年假请假条
2014/02/04 职场文书
2014年元旦感言
2014/03/06 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python