Tab 标签切换

使用方法

使用ax-tab，ax-tab-nav和ax-tab-content即可迅速创建一个tab切换DOM结构。追加axTab属性即可运行tab切换。以下是基本结构。

                        <div class="ax-tab" axTab>
                            <ul class="ax-tab-nav">
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4</li>
                            </ul>
                            <ul class="ax-tab-content">
                                <li>a</li>
                                <li>b</li>
                                <li>c</li>
                                <li>d</li>
                            </ul>
                        </div>

除了通过axTab属性方式运行tab切换，也可以使用js运行tab切换。

                        <div class="ax-tab" id="tab">
                            <ul class="ax-tab-nav">
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4</li>
                            </ul>
                            <ul class="ax-tab-content">
                                <li>a</li>
                                <li>b</li>
                                <li>c</li>
                                <li>d</li>
                            </ul>
                        </div>
                        <script type='text/javascript'>
                            window.onload = function () {
                                var demo = new axTab('#tab');
                            }
                        <script>

按钮式页签

使用按钮组作为ax-tab-nav。

读书看报玩手机旅行

                                <div class="ax-tab" axTab>
                                <span class="ax-btn-group ax-tab-nav"><a href="###" class="ax-btn">读书</a><a href="###" class="ax-btn">看报</a><a href="###" class="ax-btn">玩手机</a><a href="###" class="ax-btn">旅行</a></span>
                                    <ul class="ax-tab-content">
                                        <li>a</li>
                                        <li>b</li>
                                        <li>c</li>
                                        <li>d</li>
                                    </ul>
                                </div>

Tab菜单式页签

使用ax-menu-tab作为ax-tab-nav。默认水平居中对齐。

                                <div class="ax-tab" axTab>
                                    <div class="ax-tab-nav ax-menu-tab">
                                        <a href="###" class="ax-item"><span class="tab_title">北京</span></a>
                                        <a href="###" class="ax-item"><span class="tab_title">天津</span></a>
                                        <a href="###" class="ax-item"><span class="tab_title">乌鲁木齐</span></a>
                                    </div>
                                    <ul class="ax-tab-content">
                                        <li>a</li>
                                        <li>b</li>
                                        <li>c</li>
                                        <li>d</li>
                                    </ul>
                                </div>

栅格均分页签

借助ax-grid栅格均分ax-tab-nav。

                                <div class="ax-tab" axTab>
                                    <div class="ax-grid">
                                        <ul class="ax-grid-inner ax-tab-nav ax-menu-tab">
                                            <li class="ax-grid-block ax-col-8 ax-item">北京</li>
                                            <li class="ax-grid-block ax-col-8 ax-item">天津</li>
                                            <li class="ax-grid-block ax-col-8 ax-item">乌鲁木齐</li>
                                            <div class="ax-clear"></div>
                                        </ul>
                                    </div>
                                    <ul class="ax-tab-content">
                                        <li>a</li>
                                        <li>b</li>
                                        <li>c</li>
                                    </ul>
                                </div>

自适应分割页签

借助ax-layout弹性伸缩分割ax-tab-nav。

                                <div class="ax-tab" axTab>

                                    <ul class="ax-row ax-tab-nav ax-menu-tab">
                                        <a href="###" class="ax-item">在职分红</a>
                                        <a href="###" class="ax-item">后勤超额分红</a>
                                        <li class="ax-col ax-item">中国广东省深圳市南山区业务部超额分红</li>
                                    </ul>
                                    <div class="ax-break-line"></div>

                                    <ul class="ax-tab-content">
                                        <li>a</li>
                                        <li>b</li>
                                        <li>c</li>
                                    </ul>
                                </div>

分页式页签

使用ax-menu-page作为ax-tab-nav。

                                <div class="ax-tab" axTab>
                                    <div class="ax-menu-page ax-tab-nav"><a href="###" class="ax-item"><i class="ax-iconfont ax-icon-star"></i>北京</a><a href="###" class="ax-item"><i class="ax-iconfont ax-icon-global"></i>天津</a><a href="###" class="ax-item">乌鲁木齐</a></div>
                                    <ul class="ax-tab-content">
                                        <li>a</li>
                                        <li>b</li>
                                        <li>c</li>
                                    </ul>
                                </div>

Tab外边框

使用ax-border样式给tab添加外边框，使用ax-radius样式给tab添加圆边，使用ax-shadow样式给tab添加阴影。

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
美利坚合众国（英语：United States of America，United States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。
马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
美利坚合众国（英语：United States of America，United States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。
马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
美利坚合众国（英语：United States of America，United States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。
马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
美利坚合众国（英语：United States of America，United States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。
马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。

                                <div class="ax-tab ax-border" axTab>
                                    <div class="ax-menu-page ax-tab-nav"><a href="###" class="ax-item">中国</a><a href="###" class="ax-item"><i class="ax-iconfont ax-icon-global"></i>美国</a><a href="###" class="ax-item">加拿大</a><a href="###" class="ax-item">马来西亚</a></div>
                                    <ul class="ax-tab-content">
                                        <li class="ax-padding">中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</li>
                                        <li class="ax-padding">美利坚合众国（英语：United States of America，United States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。</li>
                                        <li class="ax-padding">加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li>
                                        <li class="ax-padding">马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。 </li>
                                    </ul>
                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-tab ax-border" axTab>

                                    <div class="ax-tab-nav ax-menu-tab">
                                        <a href="###" class="ax-item ax-active"><span class="tab_title">中国</span></a>
                                        <a href="###" class="ax-item"><span class="tab_title">美国</span></a>
                                        <a href="###" class="ax-item"><span class="tab_title">加拿大</span></a>
                                        <a href="###" class="ax-item"><span class="tab_title">马来西亚</span></a>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <ul class="ax-tab-content">
                                        <li class="ax-padding">中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</li>
                                        <li class="ax-padding">美利坚合众国（英语：United States of America，United States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。</li>
                                        <li class="ax-padding">加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li>
                                        <li class="ax-padding">马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。 </li>
                                    </ul>
                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-tab ax-border ax-shadow" axTab>
                                    <div class="ax-menu-page ax-tab-nav"><a href="###" class="ax-item">中国</a><a href="###" class="ax-item"><i class="ax-iconfont ax-icon-global"></i>美国</a><a href="###" class="ax-item">加拿大</a><a href="###" class="ax-item">马来西亚</a></div>
                                    <ul class="ax-tab-content">
                                        <li class="ax-padding">中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</li>
                                        <li class="ax-padding">美利坚合众国（英语：United States of America，United States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。</li>
                                        <li class="ax-padding">加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li>
                                        <li class="ax-padding">马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。 </li>
                                    </ul>
                                </div>
                                <div class="ax-break"></div>
                                <div class="ax-tab ax-shadow" axTab>

                                    <div class="ax-tab-nav ax-menu-tab">
                                        <a href="###" class="ax-item ax-active"><span class="tab_title">中国</span></a>
                                        <a href="###" class="ax-item"><span class="tab_title">美国</span></a>
                                        <a href="###" class="ax-item"><span class="tab_title">加拿大</span></a>
                                        <a href="###" class="ax-item"><span class="tab_title">马来西亚</span></a>
                                    </div>
                                    <ul class="ax-tab-content">
                                        <li class="ax-padding">中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。</li>
                                        <li class="ax-padding">美利坚合众国（英语：United States of America，United States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。</li>
                                        <li class="ax-padding">加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li>
                                        <li class="ax-padding">马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。 </li>
                                    </ul>
                                </div>

嵌套使用

在ax-tab-content的li子元素内可重复使用ax-tab。

中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
中华人民共和国的成立第三次国内革命战争抗日战争
- 1949年10月1日中华人民共和国的成立，标志着中国进入了人民当家作主的新时期。
- 1945年8月至1949年10月是第三次国内革命战争时期。第三次国内革命战争是中国人民在中国共产党领导下反对国民党反动派的战争。
- 1937年7月7日，日军进攻卢沟桥，中国军队奋起还击，全国抗日战争的序幕由此揭开。8月13日，日军进攻上海，国民政府被迫对日作战。
美利坚合众国（英语：United States of America，United States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。
马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。

                                <div class="ax-tab ax-border" axTab>
                                    <div class="ax-tab-nav ax-menu-tab">
                                        <a href="###" class="ax-item ax-active"><span class="tab_title">中国</span></a>
                                        <a href="###" class="ax-item"><span class="tab_title">美国</span></a>
                                        <a href="###" class="ax-item"><span class="tab_title">加拿大</span></a>
                                        <a href="###" class="ax-item"><span class="tab_title">马来西亚</span></a>
                                    </div>
                                    <div class="ax-break-line"></div>
                                    <ul class="ax-tab-content">
                                        <li class="ax-padding">中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
                                            <div class="ax-tab ax-border" axTab>
                                                <div class="ax-tab-nav ax-menu-tab">
                                                    <a href="###" class="ax-item ax-active"><span class="tab_title">中华人民共和国的成立</span></a>
                                                    <a href="###" class="ax-item"><span class="tab_title">第三次国内革命战争</span></a>
                                                    <a href="###" class="ax-item"><span class="tab_title">抗日战争</span></a>
                                                </div>
                                                <div class="ax-break-line"></div>
                                                <ul class="ax-tab-content">
                                                    <li class="ax-padding">1949年10月1日中华人民共和国的成立，标志着中国进入了人民当家作主的新时期。</li>
                                                    <li class="ax-padding">1945年8月至1949年10月是第三次国内革命战争时期。第三次国内革命战争是中国人民在中国共产党领导下反对国民党反动派的战争。</li>
                                                    <li class="ax-padding">1937年7月7日，日军进攻卢沟桥，中国军队奋起还击，全国抗日战争的序幕由此揭开。8月13日，日军进攻上海，国民政府被迫对日作战。</li>
                                                </ul>
                                            </div>
                                        </li>
                                        <li class="ax-padding">美利坚合众国（英语：United States of America，United States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。</li>
                                        <li class="ax-padding">加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li>
                                        <li class="ax-padding">马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。 </li>
                                    </ul>
                                </div>

禁止页签

对ax-tab-nav下的item使用aria-disabled="true"属性即可;或者将要禁止页签的id写入disabled属性。

                                <div class="ax-tab" axTab>
                                    <div class="ax-menu-page ax-tab-nav"><a href="###" class="ax-item">页签0</a><a href="###" class="ax-item" aria-disabled="true">页签1</a><a href="###" class="ax-item">页签2</a><a href="###" class="ax-item">页签3</a></div>
                                    <ul class="ax-tab-content">
                                        <li>a</li>
                                        <li>b</li>
                                        <li>c</li>
                                        <li>d</li>
                                    </ul>
                                </div>

载入自动定位页签

框架默认tab展示第一个页签，通过使用参数index可自定义载入的页签（或给tab添加index属性和值）。第一个页签值是0。

                                <div class="ax-tab" axTab="index:2">
                                    <div class="ax-menu-page ax-tab-nav"><a href="###" class="ax-item">页签0</a><a href="###" class="ax-item">页签1</a><a href="###" class="ax-item">页签2</a><a href="###" class="ax-item">页签3</a></div>
                                    <ul class="ax-tab-content">
                                        <li>a</li>
                                        <li>b</li>
                                        <li>c</li>
                                        <li>d</li>
                                    </ul>
                                </div>

更新参数

通过使用update方法更新插件参数。该方法有两个参数：

setting：将要更新的参数，举例：{index:2}
callback：回调函数，可不填

举例说明：更新tab显示的页签为第三个。更新

<script type='text/javascript'>
        let update = new axTab('#update');
            document.querySelector('#btnUpdate').onclick = function() {
                update.update({
                    index: 2
                }, function() {
                    alert('已经更新了！');
                });
        }
</script>

                                    <div class="ax-tab" id="update">
                                        <div class="ax-menu-page ax-tab-nav"><a href="###" class="ax-item">页签0</a><a href="###" class="ax-item">页签1</a><a href="###" class="ax-item">页签2</a><a href="###" class="ax-item">签值3</a></div>
                                        <ul class="ax-tab-content">
                                            <li>a</li>
                                            <li>b</li>
                                            <li>c</li>
                                            <li>d</li>
                                        </ul>
                                    </div>

给ax-tab使用cookie

通过使用参数cookie可自定义开启cookie（或给tab添加cookie属性和值），在刷新页面之后依然保持打开状态。如果同一个页面有个多个tab，并且都开启了cookie，那么cookie的值需要唯一。

                                <div class="ax-tab" axTab="cookie:'cookie001'">
                                    <div class="ax-menu-page ax-tab-nav"><a href="###" class="ax-item">页签0</a><a href="###" class="ax-item">页签1</a><a href="###" class="ax-item">页签2</a><a href="###" class="ax-item">页签3</a></div>
                                    <ul class="ax-tab-content">
                                        <li>a</li>
                                        <li>b</li>
                                        <li>c</li>
                                        <li>d</li>
                                    </ul>
                                </div>

摧毁实例

使用destroy方法可摧毁实例，支持回调函数（无参数，可省略）。摧毁

<script type='text/javascript'>
var destroyInstance = new axTab('#destroy');
            var btnDestroy = document.querySelector('#btnDestroy');
            btnDestroy.onclick = function () {
                destroyInstance.destroy(function () {
                    alert('实例摧毁了！');
                });
            }
</script>

                                <div class="ax-tab" id="destroy">
                                    <div class="ax-menu-page ax-tab-nav"><a href="###" class="ax-item">页签0</a><a href="###" class="ax-item">页签1</a><a href="###" class="ax-item">页签2</a><a href="###" class="ax-item">页签3</a></div>
                                    <ul class="ax-tab-content">
                                        <li>a</li>
                                        <li>b</li>
                                        <li>c</li>
                                        <li>d</li>
                                    </ul>
                                </div>

监听方法

借鉴jQuery的写法，本插件有若干监听方法，基本写法是：instance.on('show',function(){})；具体事件说明如下：

show 页签显示执行，支持参数index（当前页签索引）
load Tab初始化后执行
update 参数更新后执行

<script type='text/javascript'>
var eventInstance = new axTab('#on');
            eventInstance.on('shown', function(i) {
                alert('开始展开第' + i + '个ITEM');
            }).on('load', function() {
                alert('初始化完成');
            });
</script>

                                <div class="ax-tab" id="on">
                                    <div class="ax-menu-page ax-tab-nav"><a href="###" class="ax-item">页签0</a><a href="###" class="ax-item">页签1</a><a href="###" class="ax-item">页签2</a><a href="###" class="ax-item">页签3</a></div>
                                    <ul class="ax-tab-content">
                                        <li>a</li>
                                        <li>b</li>
                                        <li>c</li>
                                        <li>d</li>
                                    </ul>
                                </div>

参数汇总

                index: '',//默认显示哪个页签，第一个页签的index是0
                cookie: '',//是否保存cookie，刷新页面保持之前的打开状态，填写唯一字符串，比如：'mycookie001'
                trigger: 'click',//切换的动作，默认是click点击切换，可选hover切换
                disabled:'',//初始化后禁止那个页签，'#id'或者'#id,.classname,node'

操作方法

名称	说明	参数说明	回调函数
init()	初始化	无参数	无回调函数
update(setting, callback)	更新所有参数	setting是用户自定义参数，是一个对象；callback是回调函数，可不填	function(){} 无参数
destroy(callback)	摧毁实例	无参数	function(){} 无参数
on(type, handler)	监听实例	type是监听事件，具体可看前文的：监听方法；handler是回调函数	function(index){} index：当前li的索引，可不填
axInstance(axTabs, id)	获取实例	axTabs是当页创建的所有实例；id是指TAB元素DOM的id	无回调函数

在回调函数中this均指向实例本身，所以在回调函数中可默认使用如下变量：

this：实例本身
this.targetDom：TAB的Dom
this.options：实例的参数

使用axSwiper制作

借助axSwiper插件制作tab切换，swiper插件用法请见axSwiper。

北京

天津

乌鲁木齐

重庆

深圳

北京地处中国北部、华北平原北部，东与天津毗连，其余均与河北相邻，是世界著名古都和现代化国际城市。

天津地处中国北部、海河下游、东临渤海，是中国北方最大的港口城市，国家物流枢纽，北方国际航运核心区。

乌鲁木齐地处中国西北地区、新疆中部、亚欧大陆中心、天山山脉中段北麓、准噶尔盆地南缘，毗邻中亚各国，是新疆的政治、经济、文化、科教和交通中心

重庆地处中国内陆西南部，是长江上游地区的经济、金融、科创、航运和商贸物流中心，国家物流枢纽。

深圳地处中国华南地区、广东南部、珠江口东岸，东临大亚湾和大鹏湾，西濒珠江口和伶仃洋，南隔深圳河与香港相连，是粤港澳大湾区四大中心城市之一。

<script type='text/javascript'>
            var tabNav = new axSwiper('#tab-swiper-nav', {
                slidesPerView: 3,
                watchSlidesVisibility: true,
                watchSlidesProgress: true,
            });
            var tabCon = new axSwiper('#tab-swiper-con', {
                autoHeight: true,
                thumbs: {
                    swiper: tabNav,
                    slideThumbActiveClass: 'active-nav',
                }
            });
</script>

                                <div class="ax-swiper ax-swiper-nav" id="tab-swiper-nav">
                                    <div class="ax-wrapper">
                                        <div class="ax-slide active-nav">北京</div>
                                        <div class="ax-slide">天津</div>
                                        <div class="ax-slide">乌鲁木齐</div>
                                        <div class="ax-slide">重庆</div>
                                        <div class="ax-slide">深圳</div>
                                    </div>
                                </div>
                                <div class="ax-break-line"></div>
                                <div class="ax-swiper ax-swiper-content" id="tab-swiper-con">
                                    <div class="ax-wrapper">
                                        <div class="ax-slide active-nav">北京地处中国北部、华北平原北部，东与天津毗连，其余均与河北相邻，是世界著名古都和现代化国际城市。</div>
                                        <div class="ax-slide">天津地处中国北部、海河下游、东临渤海，是中国北方最大的港口城市，国家物流枢纽，北方国际航运核心区。</div>
                                        <div class="ax-slide">乌鲁木齐地处中国西北地区、新疆中部、亚欧大陆中心、天山山脉中段北麓、准噶尔盆地南缘，毗邻中亚各国，是新疆的政治、经济、文化、科教和交通中心</div>
                                        <div class="ax-slide">重庆地处中国内陆西南部，是长江上游地区的经济、金融、科创、航运和商贸物流中心，国家物流枢纽。</div>
                                        <div class="ax-slide">深圳地处中国华南地区、广东南部、珠江口东岸，东临大亚湾和大鹏湾，西濒珠江口和伶仃洋，南隔深圳河与香港相连，是粤港澳大湾区四大中心城市之一。</div>
                                    </div>
                                </div>