image.png
    思路整理
    功能有两个：
    1.tab栏切换：当点击某个li时，切换到对应内容中，li是选中状态（清除点击选项之前的所有状态

    2.三级联动：首先插入初始的省份，城市，区域，页面初始时，默认显示的是第一个省份的第一个城市的第一个区域
    注意：如果是直辖市，例如北京，没有市，都是区域，此时需要判定城市数组长度==1，城市内容以及tab栏全部隐藏
    然后分别设置3个点击事件，当点击省份时，拿到索引，要写入新的城市数据，并且清空上一个，tab栏也要自动更换

    点击事件中的tab栏切换和写入省，市，区数据最好能封装函数，代码少很多

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Document</title>
    8.     <style>
    9.         *{
    10.             margin: 0;
    11.             padding: 0;
    12.         }
    13.         a{
    14.             text-decoration: none;
    15.             color: black;
    16.         }
    17.         ul{
    18.             list-style: none;
    19.         }
    20.         .clearfix::before,.clearfix::after{
    21.             content: "";
    22.             display: table;
    23.         }
    24.         .clearfix::after{
    25.             clear: both;
    26.         }
    27.         .clearfix{
    28.             zoom: 1;
    29.         }
    30.         .wrap{
    31.             width: 500px;
    32.             height: 300px;
    33.             padding: 15px;
    34.             border: 1px solid #e0e0e0;
    35.             margin: 100px auto;
    36.         }
    37.         .tab-nav{
    38.             height: 30px;
    39.             border-bottom: 1px solid #e0e0e0;
    40.         }
    41.         .tab-nav ul li{
    42.             float: left;
    43.             width: 70px;
    44.             border: 1px solid #e0e0e0;
    45.             border-bottom: none;
    46.             line-height: 28px;
    47.             text-align: center;
    48.             font-size: 12px;
    49.             position: relative;
    50.         }
    51.         .tab-nav ul li:nth-child(1),
    52.         .tab-nav ul li:nth-child(2){
    53.             border-right: none;
    54.         }
    55.         /* 选中时的样式 */
    56.         .tab-nav ul li.active{
    57.             font-weight: 700;
    58.             background-color: #fff;
    60.         }
    61.         /*伪元素相当于行标签 */
    62.         .tab-nav ul li.active::before{
    63.             content: "";
    64.             position: absolute;
    65.             width: 72px;
    66.             height: 0;
    67.             top: -1px;
    68.             left: -1px;
    69.             border-top: 2px solid #f10180;
    70.         }
    71.         .tab-nav ul li.active::after{
    72.             content: "";
    73.             position: absolute;
    74.             bottom: -3px;
    75.             left: -1px;
    76.             width: 70px;
    77.             border-top: 2px solid #fff;
    78.         }
    79.         /* 选项卡对应内容、 */
    80.         .tab-con{
    81.             margin-top: 30px;
    82.         }
    83.         .tab-con-item{
    84.             display: none;
    85.         }
    86.         .con-show{
    87.             display: block;
    88.         }
    89.         .tab-con-item ul li{
    90.             float: left;
    91.             width: 68px;
    92.             border-bottom: 2px;
    93.         }
    94.         .tab-con-item ul li a{
    95.             display: inline-block;
    96.             max-width: 46px;
    97.             padding-right: 10px;
    98.             padding-left: 10px;
    99.             white-space: nowrap;
    100.             text-overflow: ellipsis;
    101.             overflow: hidden;
    102.             line-height: 20px;
    103.             border: 1px solid #fff;
    104.             font-size: 12px;
    105.             color: black;
    106.             box-sizing: content-box;
    107.         }
    108.         /* 鼠标悬停 */
    109.         .tab-con-item ul li a:hover{
    110.             color: #f10180;
    111.             border: 1px solid #f10180;
    112.         }
    113.         .tab-con-item ul li a.selected{
    114.             background-color: #f10180;
    115.             color: white;
    116.         }
    117.     </style>
    118.   </head>
    119.   <body>
    120.     <div class="wrap">
    121.         <div class="tab-nav">
    122.             <ul class="clearfix">
    123.                 <li class="active">省份</li>
    124.                 <li>城市</li>
    125.                 <li>区域</li>
    126.             </ul>
    127.         </div>
    128.         <div class="tab-con">
    129.             <div class="tab-con-item prov con-show">
    130.                 <ul class="clearfix">
    132.                 </ul>
    133.             </div>
    134.             <div class="tab-con-item city">
    135.                 <ul class="clearfix">
    137.                 </ul>
    138.             </div>
    139.             <div class="tab-con-item area">
    140.                 <ul class="clearfix"></ul>
    141.             </div>
    142.         </div>
    143.     </div>
    145.     <script src="./js/city_code.js"></script>
    146.     <script>
    147.         var tabNavs=document.querySelectorAll('.tab-nav ul li')
    148.         var tabCons=document.querySelectorAll('.tab-con-item')
    149.         var provUl=document.querySelector('.prov ul')
    150.         var cityUl=document.querySelector('.city ul')
    151.         var areaUl=document.querySelector('.area ul')
    154.         //功能1：tab栏切换
    155.         var currentIndex=0//一个记录上次索引的变量
    156.         for(var i=0;i<tabNavs.length;i++){
    158.             //给li添加属性
    159.             tabNavs[i].index=i;
    161.             //点击tab-nav 中的li
    162.             tabNavs[i].onclick=function(){
    163.                 changeTab(this.index)
    164.             }
    165.         }
    167.         //tab栏切换功能
    168.         function changeTab(index) {
    169.             //恢复被选中之前li的样式
    170.             tabNavs[currentIndex].classList.remove('active')
    171.             //隐藏之前选中的con区域
    172.             tabCons[currentIndex].classList.remove('con-show')
    174.             //设置当前选中li的样式
    175.             tabNavs[index].classList.add('active')
    176.             //显示被选中的con区域
    177.             tabCons[index].classList.add('con-show')
    179.             //记录当前点击的li索引
    180.             currentIndex=index
    181.           }
    183.         //功能2：三级联动
    184.         // 插入省
    185.         var selected_prov_index=0//记录被选中省份a的索引
    187.         function bindProvData(data){
    188.             for(var i=0;i<data.length;i++){
    189.                 if (i==0) {//默认选中省份
    191.                     // 点击A标签不跳转页面，执行JS代码，那么地址栏里写javascript:;就可以
    192.                     provUl.innerHTML+=`
    193.                     <li><a href="javascript:;" class="selected" data-index="${i}">${data[i].name}</a></li>
    194.                     `
    195.                     selected_prov_index=i
    196.                     continue;
    197.                 }
    198.                 provUl.innerHTML+=`
    199.                 <li><a href="javascript:;" data-index="${i}">${data[i].name}</a></li>
    200.                 `
    201.             }
    202.         }
    204.         bindProvData(data);
    206.         //插入城市
    207.         selected_city_index=0
    209.         function bindCityData(provIndex) { 
    210.             var cityArr=data[provIndex].city;// 默认选中省 的 城市数组
    211.             if (cityArr.length==1) {
    212.                 //隐藏城市tab-nav
    213.                 tabNavs[1].style.display='none'
    215.             }else{
    217.                 // 普通省份，显示城市tab-bav
    218.                 tabNavs[1].style.display='block'
    219.                 // 插入城市
    220.                 for(var i=0;i<cityArr.length;i++){
    221.                     if (i==0) {
    222.                         cityUl.innerHTML+=`
    223.                         <li><a href="javascript:;" class="selected" data-index="${i}">${cityArr[i].name}</a></li>
    224.                         `
    225.                         selected_city_index=i;
    226.                         continue;
    227.                     }
    228.                     cityUl.innerHTML+=`
    229.                     <li><a href="javascript:;" data-index="${i}">${cityArr[i].name}</a></li>
    230.                     `
    231.                 }
    232.             }
    233.         }
    235.         bindCityData(selected_prov_index);
    237.         // 插入区域li
    238.         selected_area_index=0
    240.         function bindAreaData(provIndex,cityIndex) { 
    241.             var areaArr=data[provIndex].city[cityIndex].area;
    242.             for(var i=0;i<areaArr.length;i++){
    244.                 areaUl.innerHTML+=`
    245.                 <li><a href="javascript:;" data-index="${i}">${areaArr[i].name}</a></li>
    246.                 `
    247.             }
    248.             selected_area_index=0;
    249.         }
    251.         bindAreaData(selected_prov_index,selected_city_index);
    253.         // 3个点击事件所作事情不一样，不要循环绑定
    254.         //点击省份a
    255.         tabCons[0].onclick=function(e){
    256.             if (e.target.nodeName=='A') {
    257.                 // console.log('*********');
    258.                 // 更新城市 区域
    259.                 // 找到省份索引
    260.                 var provInd=e.target.dataset.index;
    261.                 // 清空城市
    262.                 cityUl.innerHTML=''
    263.                 //插入新的城市数据
    264.                 bindCityData(provInd)
    266.                 //清空区域
    267.                 areaUl.innerHTML=''
    268.                 // 插入新的区域数据，默认为第一个城市的区域
    269.                 // 城市索引固定为0
    270.                 var cityInd=0;
    271.                 bindAreaData(provInd,cityInd)
    274.                 // 切换省份时，更换选中样式
    275.                 var prov_as=document.querySelectorAll('.prov a')
    277.                 prov_as[selected_prov_index].classList.remove('selected')
    278.                 e.target.classList.add('selected')
    279.                 // 更新省份索引
    280.                 selected_prov_index=e.target.dataset.index
    283.                 // 判断点击的是直辖市还是普通省份
    284.                 var cityArr=data[selected_prov_index].city
    285.                 if (cityArr.length==1) {
    286.                     changeTab(2)
    287.                 }else{
    288.                     changeTab(1)
    289.                 }
    292.             }
    293.         }
    294.         //点击城市a
    295.         tabCons[1].onclick=function(e){
    296.             if (e.target.nodeName=='A') {
    297.                 // 更新区域
    298.                 //须知省份索引和城市索引
    299.                 var cityInd=e.target.dataset.index
    300.                 // 清空区域
    301.                 areaUl.innerHTML=''
    302.                 //更新区域
    303.                 bindAreaData(selected_prov_index,cityInd)
    305.                 //切换城市选中的样式
    306.                 var city_as=document.querySelectorAll('.city a')
    307.                 city_as[selected_city_index].classList.remove('selected')
    308.                 e.target.classList.add('selected')
    309.                 selected_city_index=e.target.dataset.index
    311.                 changeTab(2)
    312.             }
    313.         }
    314.         //点击区域a
    315.         tabCons[2].onclick=function(e){
    316.             if (e.target.nodeName=='A') {
    317.                 // 切换选项的样式
    318.                 var area_as=document.querySelectorAll('.area a')
    319.                 area_as[selected_area_index].classList.remove('selected')
    320.                 e.target.classList.add('selected')
    321.                 // 记录当前被选中的区域a的索引
    322.                 // 直辖市的区域(没有市，直接是区)
    324.                 // 普通省份的区域
    325.                 selected_area_index=e.target.dataset.index
    326.             }
    327.         }
    328.     </script>
    329.   </body>
    330. </html>