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

前端技术 2023/09/02 JavaScript

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.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=\"#\">毕节</a>
    <a href=\"#\">霸州</a>
    <a href=\"#\">巴中</a>
    <a href=\"#\">白山</a>
    <a href=\"#\">保山</a>
    <a href=\"#\">百色</a>
    <a href=\"#\">巴彦淖尔</a>
    <a href=\"#\">白银</a>
    <a href=\"#\">亳州</a>
    <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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/5685

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请联系我

微信
QQ好友
QQ空间
腾讯微博
新浪微博
人人网

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案

2024-02(2)
2023-06(1)
2023-05(1)
2023-04(14)
2023-03(3)
2023-01(6)
2022-12(5)
2022-11(5)
2022-07(2)
2022-06(4)
2022-05(3)
2022-03(1)
2021-12(6)
2021-11(1)
2021-10(3)
2021-09(5)
2021-07(5)
2021-02(2)
2021-01(7)
2020-12(18)
2020-11(14)
2020-10(12)
2020-09(10)
2020-08(22)
2020-07(2)
2020-06(1)
2020-04(5)
2020-03(9)
2020-02(7)
2020-01(9)
2019-12(8)
2019-11(10)
2019-10(11)
2019-09(17)
2019-08(16)
2019-07(6)
2019-06(3)
2019-04(1)
2019-03(8)
2019-02(5)
2019-01(1)
2018-11(2)
2018-10(3)
2018-09(1)
2018-08(3)
2018-07(3)
2018-06(7)
2018-04(4)
2018-03(5)
2018-02(4)
2018-01(22)
2017-12(3)
2017-11(5)
2017-10(15)
2017-09(26)
2017-08(1)
2017-07(3)