v1.0核心
v1.0实例
v2.0

Tab 标签切换

使用方法 PLUGIN

使用ax-tab，ax-tab-nav和ax-tab-content即可迅速创建一个tab切换。本框架对使用ax-tab类的标签有效。以下是基本结构。

                        <div class="ax-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>
  • 1
  • 2
  • 3
  • 4
  • a
  • b
  • c
  • d

按钮式页签 PLUGIN

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

读书看报玩手机旅行
  • a
  • b
  • c
  • d
                                <div class="ax-tab">
                                <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菜单式页签 PLUGIN

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

北京 天津 乌鲁木齐
  • a
  • b
  • c
  • d
                                <div class="ax-tab">
                                    <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。

  • 北京
  • 天津
  • 乌鲁木齐
  • a
  • b
  • c
                                <div class="ax-tab">
                                    <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。

  • a
  • b
  • c
                                <div class="ax-tab">

                                    <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。

北京天津乌鲁木齐
  • a
  • b
  • c
                                <div class="ax-tab">
                                    <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"><svg class="ax-svg"><use xlink:href="#ax-icon-global"></use></svg>天津</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">
                                    <div class="ax-menu-page ax-tab-nav"><a href="###" class="ax-item">中国</a><a href="###" class="ax-item"><svg class="ax-svg"><use  xlink:href="#ax-icon-global"></use></svg>美国</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">

                                    <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">
                                    <div class="ax-menu-page ax-tab-nav"><a href="###" class="ax-item">中国</a><a href="###" class="ax-item"><svg class="ax-svg"><use  xlink:href="#ax-icon-global"></use></svg>美国</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">

                                    <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">
                                    <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">
                                                <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>

以插件形式定义tab

通过使用axTab插件形式显示tab。

JS HTML 
  • <script type='text/javascript'>
$(document).ready(function () {
     $("#tab01").axTab();
});
</script>
                        
  •                                 <div class="ax-tab" id="tab01">
                                    <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>

载入自动定位页签

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

JS HTML 
  • <script type='text/javascript'>
$(document).ready(function () {
     $("#tab02").axTab({index:2});
});
</script>
                        
  •                                 <div class="ax-tab" id="tab02">
                                    <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再添加样式

通过使用参数name可自定义ax-tab的样式。

JS HTML 
  • <script type='text/javascript'>
$(document).ready(function () {
     $("#tab03").axTab({name:'mytab',});
});
</script>
                        
  •                                 <div class="ax-tab" id="tab03">
                                    <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添加data-cookie属性和值），在刷新页面之后依然保持打开状态。如果同一个页面有个多个tab，并且都开启了cookie，那么cookie的值需要唯一。

JS HTML 
  • <script type='text/javascript'>
$(document).ready(function () {
     $("#tab04").axTab({cookie:'tabcookie',});
});
</script>
                        
  •                                 <div class="ax-tab" id="tab04">
                                    <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>

参数汇总

名称 类型 默认值 说明
name string 空 自定义ax-tab的样式
index number 空 载入是默认显示第几个页签，第一个用0表示，第二个用1表示；等同于标签data-index=''属性；标签属性优先，js属性次之，建议不要叠加使用。
cookie string 空 tab的cookie名。是否使用cookie保持打开状态，如果需要请填写当页唯一的cookie；等同于标签data-cookie=''属性；标签属性优先，js属性次之，建议不要叠加使用。
如果同时设置了index和cookie，那么会自动取消cookie设定。

使用swiper制作

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

北京
天津
乌鲁木齐
重庆
深圳
北京地处中国北部、华北平原北部，东与天津毗连，其余均与河北相邻，是世界著名古都和现代化国际城市。
天津地处中国北部、海河下游、东临渤海，是中国北方最大的港口城市，国家物流枢纽，北方国际航运核心区。
乌鲁木齐地处中国西北地区、新疆中部、亚欧大陆中心、天山山脉中段北麓、准噶尔盆地南缘，毗邻中亚各国，是新疆的政治、经济、文化、科教和交通中心
重庆地处中国内陆西南部，是长江上游地区的经济、金融、科创、航运和商贸物流中心，国家物流枢纽。
深圳地处中国华南地区、广东南部、珠江口东岸，东临大亚湾和大鹏湾，西濒珠江口和伶仃洋，南隔深圳河与香港相连，是粤港澳大湾区四大中心城市之一。
JS HTML 
  • <script src="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.js" type="text/javascript"></script>
<link href="https://src.axui.cn/v1.0/src/plugins/swiper/swiper.min.css" rel="stylesheet" >
<script type='text/javascript'>
$(document).ready(function () {
        var tabNav = new Swiper('#tab-swiper-nav', {
            slidesPerView : 3,
            watchSlidesVisibility: true,
            watchSlidesProgress: true,
        });
        var tabCon = new Swiper('#tab-swiper-con', {
            autoHeight: true,
            thumbs: {
                swiper: tabNav,
                slideThumbActiveClass: 'active-nav',
            }
        });
});
</script>
                        
  •                                 <div class="swiper-container ax-swiper-nav" id="tab-swiper-nav">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide active-nav">北京</div>
                                        <div class="swiper-slide">天津</div>
                                        <div class="swiper-slide">乌鲁木齐</div>
                                        <div class="swiper-slide">重庆</div>
                                        <div class="swiper-slide">深圳</div>
                                    </div>
                                </div>
                                <div class="ax-break-line"></div>
                                <div class="swiper-container ax-swiper-content" id="tab-swiper-con">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide active-nav">北京地处中国北部、华北平原北部，东与天津毗连，其余均与河北相邻，是世界著名古都和现代化国际城市。</div>
                                        <div class="swiper-slide">天津地处中国北部、海河下游、东临渤海，是中国北方最大的港口城市，国家物流枢纽，北方国际航运核心区。</div>
                                        <div class="swiper-slide">乌鲁木齐地处中国西北地区、新疆中部、亚欧大陆中心、天山山脉中段北麓、准噶尔盆地南缘，毗邻中亚各国，是新疆的政治、经济、文化、科教和交通中心</div>
                                        <div class="swiper-slide">重庆地处中国内陆西南部，是长江上游地区的经济、金融、科创、航运和商贸物流中心，国家物流枢纽。</div>
                                        <div class="swiper-slide">深圳地处中国华南地区、广东南部、珠江口东岸，东临大亚湾和大鹏湾，西濒珠江口和伶仃洋，南隔深圳河与香港相连，是粤港澳大湾区四大中心城市之一。</div>
                                    </div>
                                </div>