Tab 标签切换
特点
Tab页签切换是目前系统开发和网站建设中最常用的内容堆叠方式；AXUI秉着即能快速应用又能满足自定义风格的要求，开发了axTab插件，其特点如下：
- 1、多种创建实例的方式，既支持现有节点创建实例，又支持对象数组创建实例，还支持异步json创建实例
- 2、支持从其他页面异步获取Tab内容
- 3、支持至少三种头部页签风格，支持自定义头部页签风格
- 4、支持追加Tab页签和删除页签
- 5、支持本地存储数据，刷新后自动还原
- 6、支持保持当前焦点页索引，刷新后自动还原
- 7、支持Tab无限嵌套
- 8、支持多页签横向滚动显示
- 9、支持与ax-border、ax-shadow和ax-radius配合使用，创造更多个性风格
页签头部风格
理论上Tab头部可以是任意代码，只需要遵循“父+子”节点模式；为了方便快速开发，AXUI已经内置了三种页签模式，分别是ax-btn-group、ax-lamp-group和ax-tab-group。
使用方法
使用ax-tab，header属性和body属性可迅速创建一个tab切换DOM结构。追加axTab属性即可运行tab切换。以下是基本结构。
<div class="ax-tab" axTab>
<ul header>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul body>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
- 1
- 2
- 3
- 4
- a
- b
- c
- d
除了通过axTab属性方式运行Tab切换，也可以使用js运行Tab切换。
- 1
- 2
- 3
- 4
- a
- b
- c
- d
-
<div class="ax-tab" id="tab"> <ul header> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <ul body> <li>a</li> <li>b</li> <li>c</li> <li>d</li> </ul> </div> -
new axTab('#tab');
按钮式页签
给header页签容器节点追加ax-btn-group样式类可实现按钮式布局。
<div class="ax-tab" axTab>
<span class="ax-btn-group" header><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 body>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
指示灯式页签
给header页签容器节点追加ax-lamp-group样式类可实现指示灯式布局。
- 北京
- 天津
- 乌鲁木齐
- a
- b
- c
- d
<div class="ax-tab" axTab>
<ul class="ax-lamp-group" header>
<li>北京</li>
<li>天津</li>
<li>乌鲁木齐</li>
</ul>
<ul body>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
对于指示灯式的页签可通过flex布局和grid布局获得不一样的显示效果。
栅格均分页签
- 北京
- 天津
- 乌鲁木齐
- a
- b
- c
- d
弹性页签
- 北京
- 天津
- 乌鲁木齐
- a
- b
- c
- d
<h5>栅格均分页签</h5>
<div class="ax-tab" axTab>
<ul class="ax-lamp-group ax-grid ax-grid-3" header>
<li>北京</li>
<li>天津</li>
<li>乌鲁木齐</li>
</ul>
<ul body>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
<div class="ax-break"></div>
<h5>弹性页签</h5>
<div class="ax-tab" axTab>
<ul class="ax-lamp-group ax-row" header>
<li>北京</li>
<li>天津</li>
<li class="ax-col">乌鲁木齐</li>
</ul>
<ul body>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
分页式页签
给header页签容器节点追加ax-tab-group样式类可实现分页式布局。
- 北京
- 天津
- 乌鲁木齐
- a
- b
- c
<div class="ax-tab" axTab>
<div class="ax-tab-group" header><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 body>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
弹性页签
给header页签容器节点追加ax-bounce-group样式类可实现弹性页签布局。如有必要可使用带label属性的标签包裹标题。
弹性页签方便扩充内容和方便定制风格，并且推荐在管理系统中分页使用。
- 北京2188万人
- 哈尔滨988万人
- 乌鲁木齐407万人
- a
- b
- c
<div class="ax-tab" axTab>
<ul class="ax-bounce-group" header>
<li style="width:200px;"><i label>北京</i><i class="ax-color-ignore">2188万人</i></li>
<li><i label>哈尔滨</i><i class="ax-color-ignore">988万人</i></li>
<li><i label>乌鲁木齐</i><i class="ax-color-ignore">407万人</i></li>
</ul>
<div class="ax-break-line"></div>
<ul body>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
使用边框
对ax-tab外框使用ax-border类样式可增加边框。ax-btn-group布局方式不适合使用边框。
- 中国
- 美国
- 加拿大
- 马来西亚
- 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
- 美利坚合众国（英语：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万平方公里。
- 中国14亿人
- 美国3亿人
- 加拿大3824万人
- 马来西亚3357万人
- 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
- 美利坚合众国（英语：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>
<ul class="ax-tab-group" header>
<li>中国</li>
<li>美国</li>
<li>加拿大</li>
<li>马来西亚</li>
</ul>
<ul body>
<li>
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</li>
<li>美利坚合众国（英语：United States of America，United
States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
</li>
<li>
加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li>
<li>
马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。
</li>
</ul>
</div>
<div class="ax-break"></div>
<div class="ax-tab ax-border" axTab>
<ul class="ax-lamp-group" header>
<li>中国</li>
<li>美国</li>
<li>加拿大</li>
<li>马来西亚</li>
</ul>
<div class="ax-break-line"></div>
<ul body>
<li>
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</li>
<li>美利坚合众国（英语：United States of America，United
States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
</li>
<li>
加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li>
<li>
马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。
</li>
</ul>
</div>
<div class="ax-break"></div>
<div class="ax-tab ax-border" axTab>
<ul class="ax-bounce-group" header>
<li><i label>中国</i><i class="ax-color-ignore">14亿人</i></li>
<li active><i label>美国</i><i class="ax-color-ignore">3亿人</i></li>
<li><i label>加拿大</i><i class="ax-color-ignore">3824万人</i></li>
<li><i label>马来西亚</i><i class="ax-color-ignore">3357万人</i></li>
</ul>
<ul body>
<li>
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</li>
<li active>美利坚合众国（英语：United States of America，United
States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
</li>
<li>
加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li>
<li>
马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。
</li>
</ul>
</div>
使用阴影
对ax-tab外框使用ax-shadow类样式可增加阴影；ax-shadow-*有几种规格，详情点击这里。ax-btn-group布局方式不适合使用阴影。
- 中国
- 美国
- 加拿大
- 马来西亚
- 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
- 美利坚合众国（英语：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万平方公里。
- 中国14亿人
- 美国3亿人
- 加拿大3824万人
- 马来西亚3357万人
- 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
- 美利坚合众国（英语：United States of America，United States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
- 加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。
- 马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。
<div class="ax-tab ax-shadow-border" axTab>
<ul class="ax-tab-group" header>
<li>中国</li>
<li>美国</li>
<li>加拿大</li>
<li>马来西亚</li>
</ul>
<ul body>
<li>
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</li>
<li>美利坚合众国（英语：United States of America，United
States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
</li>
<li>
加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li>
<li>
马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。
</li>
</ul>
</div>
<div class="ax-break"></div>
<div class="ax-tab ax-shadow-cloud" axTab>
<ul class="ax-lamp-group" header>
<li>中国</li>
<li>美国</li>
<li>加拿大</li>
<li>马来西亚</li>
</ul>
<ul body>
<li>
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</li>
<li>美利坚合众国（英语：United States of America，United
States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
</li>
<li>
加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li>
<li>
马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。
</li>
</ul>
</div>
<div class="ax-break"></div>
<div class="ax-tab ax-shadow-cloud" axTab>
<ul class="ax-bounce-group" header>
<li><i label>中国</i><i class="ax-color-ignore">14亿人</i></li>
<li active><i label>美国</i><i class="ax-color-ignore">3亿人</i></li>
<li><i label>加拿大</i><i class="ax-color-ignore">3824万人</i></li>
<li><i label>马来西亚</i><i class="ax-color-ignore">3357万人</i></li>
</ul>
<ul body>
<li>
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</li>
<li active>美利坚合众国（英语：United States of America，United
States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
</li>
<li>
加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li>
<li>
马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。
</li>
</ul>
</div>
使用圆角
对ax-tab外框使用ax-radius类样式可增加圆角；ax-radius-*有几种规格，详情点击这里；使用圆角风格通常需要搭配使用边框或阴影。ax-btn-group布局方式不适合使用圆角。
- 中国
- 美国
- 加拿大
- 马来西亚
- 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
- 美利坚合众国（英语：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万平方公里。
- 中国14亿人
- 美国3亿人
- 加拿大3824万人
- 马来西亚3357万人
- 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
- 美利坚合众国（英语：United States of America，United States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
- 加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。
- 马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。
<div class="ax-tab ax-shadow-border ax-radius-md" axTab>
<ul class="ax-tab-group" header>
<li>中国</li>
<li>美国</li>
<li>加拿大</li>
<li>马来西亚</li>
</ul>
<ul body>
<li>
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</li>
<li>美利坚合众国（英语：United States of America，United
States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
</li>
<li>
加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li>
<li>
马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。
</li>
</ul>
</div>
<div class="ax-break"></div>
<div class="ax-tab ax-shadow-cloud ax-radius-md" axTab>
<ul class="ax-lamp-group" header>
<li>中国</li>
<li>美国</li>
<li>加拿大</li>
<li>马来西亚</li>
</ul>
<ul body>
<li>
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</li>
<li>美利坚合众国（英语：United States of America，United
States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
</li>
<li>
加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li>
<li>
马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。
</li>
</ul>
</div>
<div class="ax-break"></div>
<div class="ax-tab ax-shadow-cloud ax-radius-md" axTab>
<ul class="ax-bounce-group" header>
<li><i label>中国</i><i class="ax-color-ignore">14亿人</i></li>
<li active><i label>美国</i><i class="ax-color-ignore">3亿人</i></li>
<li><i label>加拿大</i><i class="ax-color-ignore">3824万人</i></li>
<li><i label>马来西亚</i><i class="ax-color-ignore">3357万人</i></li>
</ul>
<ul body>
<li>
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</li>
<li active>美利坚合众国（英语：United States of America，United
States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
</li>
<li>
加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li>
<li>
马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。
</li>
</ul>
</div>
嵌套使用
在body的子元素内可重复使用axTab以实现无线嵌套。
- 中国
- 美国
- 加拿大
- 马来西亚
-
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
- 中华人民共和国的成立
- 第三次国内革命战争
- 抗日战争
- 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>
<ul class="ax-tab-group" header>
<li>中国</li>
<li>美国</li>
<li>加拿大</li>
<li>马来西亚</li>
</ul>
<ul body>
<li>
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
<div class="ax-tab ax-border" axTab>
<ul class="ax-tab-group" header>
<li>中华人民共和国的成立</li>
<li>第三次国内革命战争</li>
<li>抗日战争</li>
</ul>
<ul body>
<li>1949年10月1日中华人民共和国的成立，标志着中国进入了人民当家作主的新时期。
</li>
<li>
1945年8月至1949年10月是第三次国内革命战争时期。第三次国内革命战争是中国人民在中国共产党领导下反对国民党反动派的战争。
</li>
<li>
1937年7月7日，日军进攻卢沟桥，中国军队奋起还击，全国抗日战争的序幕由此揭开。8月13日，日军进攻上海，国民政府被迫对日作战。
</li>
</ul>
</div>
</li>
<li>美利坚合众国（英语：United States of America，United
States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
</li>
<li>
加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li>
<li>
马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。
</li>
</ul>
</div>
禁止页签
有两个方法设置页签禁止：
- 1、对header下的子元素使用
disabled属性 - 2、使用插件disabled参数，可以是一个字符串/一个数字/一个DOM节点/一个对象，或以上数组
- 如果是字符串，将找到标题内容一致的页签并禁止点击
- 如果是数字，将找到该索引的页签并禁止点击
- 如果DOM节点，将找标题元素一致的页签并禁止点击
- 如果内容对象，类似{label:'',content:''}，将从this.data变量中找到与对象一致的页签并禁止点击
- 以上可以是数组形态，以实现批量禁用
- 中国
- 美国
- 加拿大
- 马来西亚
- 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
- 美利坚合众国（英语：United States of America，United States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
- 加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。
- 马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。
<div class="ax-tab" axTab>
<ul class="ax-lamp-group" header>
<li>中国</li>
<li disabled>美国</li>
<li disabled>加拿大</li>
<li>马来西亚</li>
</ul>
<ul body>
<li>
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</li>
<li>美利坚合众国（英语：United States of America，United
States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
</li>
<li>
加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li>
<li>
马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。
</li>
</ul>
</div>
初始化页签
Tab默认展示第一个页签，第一个页签索引值是0。
有两个方法初始化焦点页签：
- 1、对header下的子元素和body下的对应的子元素使用
avtive属性 - 2、使用插件avtive参数，可以是一个字符串/一个数字/一个DOM节点/一个对象
- 如果是字符串，将找到标题内容一致的页签并设为显示状态
- 如果是数字，将找到该索引的页签并设为显示状态
- 如果DOM节点，将找标题元素一致的页签并设为显示状态
- 如果内容对象，类似{label:'',content:''}，将从this.data变量中找到与对象一致的页签并设为显示状态
- 中国
- 美国
- 加拿大
- 马来西亚
- 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
- 美利坚合众国（英语：United States of America，United States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
- 加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。
- 马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。
<div class="ax-tab" axTab>
<ul class="ax-tab-group" header>
<li>中国</li>
<li active>美国</li>
<li>加拿大</li>
<li>马来西亚</li>
</ul>
<ul body>
<li>
中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
</li>
<li active>美利坚合众国（英语：United States of America，United
States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
</li>
<li>
加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li>
<li>
马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。
</li>
</ul>
</div>
关闭页签
在标题元素内最后面追加<i close></i>便可显示关闭页签按钮，三种Tab头部布局都可使用。
tab上的关闭页签按钮默认点击会直接删除页签，为了避免手抖而意外删除页签可使用onBeforeRemove监听函数。该监听函数支持一个参数即删除的对象本身，如果监听函数直接返回true将会删除页签；如果监听函数内是异步的，那么需要使用this.remove()方法删除页签。
- 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
- 美利坚合众国（英语：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万平方公里。
以下实例删除页签使用了onBeforeRemove监听，通过axDialog删除页签
- 中国
- 美国
- 加拿大
- 马来西亚
- 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。
- 美利坚合众国（英语：United States of America，United States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。
- 加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。
- 马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。
-
<div class="ax-tab" axTab> <ul class="ax-btn-group" header> <a href="###" class="ax-btn">中国<i close></i></a> <a href="###" class="ax-btn" active>美国<i close></i></a> <a href="###" class="ax-btn">加拿大<i close></i></a> <a href="###" class="ax-btn">马来西亚<i close></i></a> </ul> <ul body> <li> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。 </li> <li active>美利坚合众国（英语：United States of America，United States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。 </li> <li> 加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li> <li> 马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。 </li> </ul> </div> <div class="ax-break"></div> <div class="ax-tab" axTab> <ul class="ax-lamp-group" header> <li>中国<i close></i></li> <li active>美国<i close></i></li> <li>加拿大<i close></i></li> <li>马来西亚<i close></i></li> </ul> <ul body> <li> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。 </li> <li active>美利坚合众国（英语：United States of America，United States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。 </li> <li> 加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li> <li> 马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。 </li> </ul> </div> <div class="ax-break"></div> <div class="ax-tab" axTab> <ul class="ax-tab-group" header> <li>中国<i close></i></li> <li active>美国<i close></i></li> <li>加拿大<i close></i></li> <li>马来西亚<i close></i></li> </ul> <ul body> <li> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。 </li> <li active>美利坚合众国（英语：United States of America，United States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。 </li> <li> 加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li> <li> 马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。 </li> </ul> </div> <div class="ax-break"></div> <div class="ax-break"></div> <div class="ax-tab" id="closeIns"> <ul class="ax-bounce-group" header> <li><i label>中国</i><i close></i></li> <li active><i label>美国</i><i close></i></li> <li><i label>加拿大</i><i close></i></li> <li><i label>马来西亚</i><i close></i></li> </ul> <ul body> <li> 中国，是以华夏文明为源泉、中华文化为基础，并以汉族为主体民族的多民族国家，通用汉语、汉字，汉族与少数民族被统称为“中华民族”，又自称为炎黄子孙、龙的传人。 </li> <li active>美利坚合众国（英语：United States of America，United States），简称“美国”，是由华盛顿哥伦比亚特区、50个州和关岛等众多海外领土组成的联邦共和立宪制国家。其主体部分位于北美洲中部，美国中央情报局《世界概况》1989年至1996年初始版美国总面积是937.3万平方公里，人口3.3亿，通用英语，是一个移民国家。 </li> <li> 加拿大（英语/法语：Canada），位于北美洲最北端，英联邦国家之一，素有“枫叶之国”的美誉，首都是渥太华。</li> <li> 马来西亚（Malaysia），是选举君主制、君主立宪制和议会民主制并存的联邦制国家，首都吉隆坡，联邦政府行政中心布城。全国分为13个州和3个联邦直辖区，全国面积共33万平方公里。 </li> </ul> </div> -
new axTab('#closeIns', { onBeforeRemove: function(obj) { let _this = this; obj.labelDom.onclick = () => { new axDialog({ content: '确定删除么？', confirm: { callback: function () { _this.remove(item); } } }).show(); } } });
滚动页签
如果页签数量比较多时可手动构建一个axSwiper的结构，通过axSwiper使页签头部可左右滚动。
如果axTab是通过js创建，那么需要使用swiper.enable参数，将之设为true。当swiper.enable为true等于页签头部启用了axSwiper插件。
- 内容0
- 内容1
- 内容2
- 内容3
- 内容4
- 内容5
- 内容6
- 内容7
- 内容8
- 内容9
- 内容10
- 内容11
- 内容12
- 内容13
- 内容14
- 内容15
- 内容16
- 内容17
- 内容18
- 内容19
- 内容0
- 内容1
- 内容2
- 内容3
- 内容4
- 内容5
- 内容6
- 内容7
- 内容8
- 内容9
- 内容10
- 内容11
- 内容12
- 内容13
- 内容14
- 内容15
- 内容16
- 内容17
- 内容18
- 内容19
<div class="ax-tab" axTab>
<div class="ax-swiper">
<ul class="ax-tab-group ax-wrapper" header>
<li class="ax-slide">页签0<i close></i></li>
<li class="ax-slide">页签1<i close></i></li>
<li class="ax-slide">页签2<i close></i></li>
<li class="ax-slide">页签3<i close></i></li>
<li class="ax-slide">页签4<i close></i></li>
<li class="ax-slide">页签5<i close></i></li>
<li class="ax-slide">页签6<i close></i></li>
<li class="ax-slide">页签7<i close></i></li>
<li class="ax-slide">页签8<i close></i></li>
<li class="ax-slide">页签9<i close></i></li>
<li class="ax-slide">页签10<i close></i></li>
<li class="ax-slide">页签11<i close></i></li>
<li class="ax-slide">页签12<i close></i></li>
<li class="ax-slide">页签13<i close></i></li>
<li class="ax-slide">页签14<i close></i></li>
<li class="ax-slide">页签15<i close></i></li>
<li class="ax-slide">页签16<i close></i></li>
<li class="ax-slide">页签17<i close></i></li>
<li class="ax-slide">页签18<i close></i></li>
<li class="ax-slide">页签19<i close></i></li>
<li class="ax-slide">页签20<i close></i></li>
</ul>
</div>
<ul body>
<li>内容0</li>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
<li>内容6</li>
<li>内容7</li>
<li>内容8</li>
<li>内容9</li>
<li>内容10</li>
<li>内容11</li>
<li>内容12</li>
<li>内容13</li>
<li>内容14</li>
<li>内容15</li>
<li>内容16</li>
<li>内容17</li>
<li>内容18</li>
<li>内容19</li>
<li>内容20</li>
</ul>
</div>
数据源
以上示例是以现有物理节点创建Tab来展示的，axTab的数据源除了物理节点之外，通过设置content参数可使用更多数据源。
参数content通常是一个数组，完整的格式如content:[{label:'',content:'',active:true,disabled:false,type:'url'},{}...]，属性说明
- label：一个Tab的标题，HTML文本格式，可以填入图标字符串
active：当前Tab的焦点状态，如果需要让某个Tab成为焦点可设为true，注意整个数组中应该最多只允许一个Tab设为truedisabled：当前Tab的禁用状态，如果需要禁用某个Tab（不可点击切换）可将值设为false，整个数组中允许多个Tab设为truetype：设置当前Tab的内容类型，默认为undefined，可设置url、async或node- 如果设为url表示Tab是一个内嵌网页；
- 如果设为async表示Tab将从其他页面异步获取内容；
- 如果设为node表示Tab将从页面获取节点作为内容；
content：设置Tab的内容，可使用多种格式，其他的可以是HTML文本或DOM节点
如果需要从json异步读取数组内容，那么content应该填写json的地址，json的格式如上。
将页面中的数组作为数据源
将同源的json文件作为数据源
将非同源的网址作为数据源
将节点内容作为数据源（appendChild方法，不影响节点原本的操作）
-
<h5>将页面中的数组作为数据源</h5> <div class="ax-tab" id="dataArr"></div> <div class="ax-break"></div> <h5>将同源的json文件作为数据源</h5> <div class="ax-tab" id="dataAsync"></div> <div class="ax-break"></div> <h5>将非同源的网址作为数据源</h5> <div class="ax-tab" id="dataIfa"></div> <div class="ax-break"></div> <h5>将节点内容作为数据源（appendChild方法，不影响节点原本的操作）</h5> <div class="ax-tab" id="dataDom"></div> <div style="display: none;"> <div id="dom01">内容1</div> <div id="dom02">内容2</div> <div id="dom03">内容3</div> </div> -
new axTab('#dataArr', { content: [ { label: '页签1', content: '内容1', active: true, }, { label: '页签2', content: '内容2', }, { label: '页签3', content: '内容3', }, ] }); new axTab('#dataAsync', { content: 'ajax/china.json', }); new axTab('#dataIfa', { content: [ { label: 'AXUI首页', content: 'https://www.axui.cn/', active: true, type:'url', }, { label: 'AXUI概述', content: 'https://www.axui.cn/v2.0/ax-index.php', type:'url', }, { label: 'AXUI实例', content: 'https://www.axui.cn/demo.php', type:'url', }, ], }); new axTab('#dataDom', { content: [ { label: '页签1', content: document.querySelector('#dom01'), active: true, }, { label: '页签2', content: document.querySelector('#dom02'), }, { label: '页签3', content: document.querySelector('#dom03'), }, ], }); -
[ { "label": "自然环境", "content": "中国位于亚洲东部，太平洋西岸。北起漠河附近的黑龙江江心，南到南沙群岛的曾母暗沙。西起帕米尔高原，东至黑龙江、乌苏里江汇合处。陆地面积960万平方千米，陆上边界2万多千米。" }, { "label": "行政区划", "content": "截至2020年底，中国共有34个省级行政区（包括23个省、5个自治区、4个直辖市、2个特别行政区）、333个地级行政区、2844个县级行政区、38741个乡级行政区。北京是中国的首都。" }, { "label": "人口", "content": "全国总人口为1443497378人，其中：普查登记的大陆31个省、自治区、直辖市和现役军人的人口共1411778724人；香港特别行政区人口为7474200人；澳门特别行政区人口为683218人；台湾地区人口为23561236人。" }, { "label": "饮食", "content": "经过千年的发展独自形成了中国饮食文化，中国饮食文化是一种广视野、深层次、多角度、高品位的悠久区域文化；是中国人民在生产和生活实践中，在食源开发、食具研制、食品调理、营养保健和饮食审美等方面创造、积累并影响周边国家和世界的物质财富及精神财富。" } ]
综合数据源
以上示例已经演示了所有数据源情况，那么这些数据源是可以混合使用，请观摩以下示例。
综合数据源01
综合数据源02（异步）
-
<h5>将页面中的数组作为数据源</h5> <div class="ax-tab" id="dataArr"></div> <div class="ax-break"></div> <h5>将同源的json文件作为数据源</h5> <div class="ax-tab" id="dataAsync"></div> <div class="ax-break"></div> <h5>将非同源的网址作为数据源</h5> <div class="ax-tab" id="dataIfa"></div> -
new axTab('#dataMore01', { content: [ { label: '文本标题', content: '文本内容', active: true, }, { label: 'dom节点', content: document.querySelector('#dom04'), }, { label: 'iframe网页', content: 'https://www.axui.cn/', type: 'url', }, { label: '异步内容', content: 'ajax/world.html#China', type: 'async', }, ], }); new axTab('#dataMore02', { content: 'ajax/tabAsync.json' }); -
[ { "label": "文本标题", "content": "文本内容" }, { "label": "dom节点", "content": "#dom05" }, { "label": "iframe网页", "content": "https://www.axui.cn/", "type": "url" }, { "label": "异步内容", "content": "ajax/world.html#China", "type": "async" } ]
单页操作
对于单个Tab可开启关闭和刷新按钮；将closable设为true，updatable设为true即可开启。
如果通过插件内置方法修改data数据，可能会导致物理节点中的内容与内存中的data数据不一致，此时便可使用页签的更新按钮更新内容。
-
let optIns = new axTab('#optIns', { closable: true, updatable: true, content: [ { label: '页签1', content: '内容1', active: true, }, { label: '页签2', content: '内容2', }, { label: '页签3', content: '内容3', }, ] }), optBtn = document.querySelector('#optBtn'), optView = document.querySelector('#optView'); optBtn.onclick = () => { optIns.data[0].content = '新内容1'; optIns.data[1].content = '新内容2'; optIns.data[2].content = '新内容3'; } optView.onclick = () => { console.log(optIns.data); } -
<div id="optIns"></div> <a href="###" class="ax-btn" id="optBtn">点击修改data内容，在点击页签上的刷新按钮！</a> <a href="###" class="ax-btn" id="optView">查看data数据</a>
变量和操作方法
本插件有系列内部成员变量和内部操作方法，用户根据这些变量和方法可以自由操作实例，据此可方便与其他组件进行交互。请按下F12按键打开浏览器控制台来观摩以下实例。
内部成员变量如下：
this.data：是一个数组，输出当前Tabs的完整数据，包含的属性如下：- label：页签标题，支持HTML文本
- content：页签的内容，视type类型而定
- type：页签的内容类型，有text（默认）、node、url、asnyc四种类型
- active：是否为激活项（焦点项），整个Tabs应该只有一项为active:true
- disabled：是否禁用，启用则设为true
- props：内容节点的其他属性，比如props:{id:'demo'}表示给bodyDom追加id=demo属性
- labelDom：页签的标题节点
- headerDom：页签的头节点，包含了labelDom、closeDom和updateDom
- bodyDom：页签的内容节点
- closeDom：删除页签的图标节点
- updateDom：更新页签的图标节点
this.targetDom：Tabs的的.ax-tab节点this.headerWrapperDom：Tabs的头部节点this.bodyWrapperDom：Tabs的内容节点this.swiperDom：Tabs中的.ax-swiper节点（如果有，否则为null）this.swiper：Tabs中的swiper实例（如果有，否则为null）this.destroyed：销毁状态
内部操作方法如下：
this.add(tabs,callback)：添加一个Tab或多个Tab，参数说明如下：- tabs：支持对象或数组，数组项属性有：label、content、type、active和disabled
- callback：回调函数，支持一个参数即添加的Tabs
this.active(tab,callback)：激活一个Tab（成为焦点），参数说明如下：- tab：支持多种数据类型；如果是一个数字则找到对应索引的Tab并激活；如果是一个字符串则找到对应的标题文本Tab并激活；如果是一个Dom节点则找到对应的标题节点Tab并激活；如果是一个对象则从this.data中找到对应项并激活
- callback：回调函数，支持一个参数即当前激活项
this.remove(tabs,callback)：删除一个Tab或多个Tab，参数说明如下：- tabs：支持多种数据类型；如果是一个数字则找到对应索引的Tab并删掉；如果是一个字符串则找到对应的标题文本Tab并删掉；如果是一个Dom节点则找到对应的标题节点Tab并删掉；如果是一个对象则从this.data中找到对应项并删掉；可以是一个数组，数组项格式前所述
- callback：回调函数，无参数
this.disable(tabs,callback)：禁用一个Tab或多个Tab，禁用后将不可点击，参数说明如下：- tabs：支持多种数据类型；如果是一个数字则找到对应索引的Tab并删掉；如果是一个字符串则找到对应的标题文本Tab并删掉；如果是一个Dom节点则找到对应的标题节点Tab并删掉；如果是一个对象则从this.data中找到对应项并删掉；可以是一个数组，数组项格式前所述
- callback：回调函数，无参数
this.enable(tabs,callback)：启用一个Tab或多个Tab，参数说明如下：- tabs：同disable的tabs参数
- callback：回调函数，无参数
this.disableAll(callback)：禁用全部Tab，支持回调函数，回调函数无参数this.enableAll(callback)：启用全部Tab，支持回调函数，回调函数无参数this.update(setting,callback)：更新参数并重新渲染节点，参数说明如下：- setting：将要更新的参数
- callback：回调函数，无参数
this.updateContent(tab,content,callback)：更新一个Tab的内容，参数说明如下：- tab：与active方法的tab参数一致
- content：更新的内容，具体格式视该Tab的type类型而定，如果不填则表示从当前的this.data变量中更新（可能没有任何变化）
- callback：回调函数，无参数
this.save(setting,callback)：保存参数到本地（基于localstorage），参数说明如下：- setting：保存的参数，支持两种格式：
- 为空，将保持当前active、disabled和content的状态
- 对象格式，比如setting={headerClass:'ax-btn-group',closable:true}
- callback：回调函数，支持一个参数即localstorage值：
this.getActive()：获得当前的焦点项，返回焦点对象，无参数this.getDisabled()：获得当前的禁用项，返回一个数组，无参数this.getIndexActive()：获得当前的焦点索引，返回一个数字，无参数
-
<div class="ax-tab" id="mIns"></div> <div class="ax-break"></div> <a href="###" class="ax-btn" id="mAdd">增加一个Tab</a> <a href="###" class="ax-btn" id="mRemove">删除第二个Tab</a> <a href="###" class="ax-btn" id="mUpdateTab">更新第三Tab的内容</a> <a href="###" class="ax-btn" id="mUpdate">更新参数</a> <a href="###" class="ax-btn" id="mActive">第四个Tab成为焦点</a> <a href="###" class="ax-btn" id="mDisable">禁用第五个Tab</a> <a href="###" class="ax-btn" id="mEnable">启用第五个Tab</a> <a href="###" class="ax-btn" id="mData">查看详细数据</a> -
let mIns = new axTab('#mIns', { content: [ { label: '页签1', content: '内容1', active: true, }, { label: '页签2', content: '内容2', }, { label: '页签3', content: '内容3', }, { label: '页签4', content: '内容4', }, { label: '页签5', content: '内容5', }, { label: '页签6', content: '内容6', }, { label: '页签7', content: '内容7', }, ] }), mAdd = document.querySelector('#mAdd'), mRemove = document.querySelector('#mRemove'), mActive = document.querySelector('#mActive'), mDisable = document.querySelector('#mDisable'), mEnable = document.querySelector('#mEnable'), mUpdate = document.querySelector('#mUpdate'), mUpdateTab = document.querySelector('#mUpdateTab'), mData = document.querySelector('#mData'); mAdd.onclick = () => { mIns.add({ label: '新增标题', content: '新增内容', }); } mRemove.onclick = () => { mIns.remove(1); } mUpdateTab.onclick = () => { mIns.updateContent(2, '更新的内容'); } mActive.onclick = () => { mIns.active(3); } mDisable.onclick = () => { mIns.disable(4); } mEnable.onclick = () => { mIns.enable(4); } mUpdate.onclick = () => { mIns.update({ active: 3, headerClass: 'ax-lamp-group', }); } mData.onclick = () => { console.log(mIns.data) }
保存数据
因为主动或被动关闭了浏览器导致对实例的操作未结束，使用保存数据功能可在重新打开浏览器之后恢复关闭之前的状态，此状态包括active状态、disabled状态、内容增减状态以及其他参数状态（视插件而定）。
保存数据功能是基于this.save方法实现的，如果需要使用自动保存功能则需要填写storageName参数并确保该参数在当页localstorage存储中是唯一的。
使用axLocalStorage.get方法来查看保存的数据，关于axLocalStorage用法可点击这里。
-
<div id="saveIns"></div> <div class="ax-break"></div> <a href="###" class="ax-btn" id="saveAdd">增加一个Tab</a> <a href="###" class="ax-btn" id="saveRemove">删除第二个Tab</a> <a href="###" class="ax-btn" id="saveUpdate">更新参数</a> <a href="###" class="ax-btn" id="saveLocal">查看本地保存的数据</a> <a href="###" class="ax-btn" id="saveData">查看详细数据</a> -
let saveIns = new axTab('#saveIns', { storageName: 'MyStorage01', content: [ { label: '页签1', content: '内容1', active: true, }, { label: '页签2', content: '内容2', }, { label: '页签3', content: '内容3', }, { label: '页签4', content: '内容4', } ] }), saveAdd = document.querySelector('#saveAdd'), saveRemove = document.querySelector('#saveRemove'), saveUpdate = document.querySelector('#saveUpdate'), saveLocal = document.querySelector('#saveLocal'), saveData = document.querySelector('#saveData'); saveAdd.onclick = () => { saveIns.add({ label: '新增标题', content: '新增内容', }); } saveRemove.onclick = () => { saveIns.remove(1); } saveUpdate.onclick = () => { saveIns.update({ active: 3, headerClass: 'ax-lamp-group', }); } saveLocal.onclick = () => { console.log(axLocalStorage.get('MyStorage01')); } saveData.onclick = () => { console.log(saveIns.data); }
更新
通过使用this.update方法更新插件参数。该方法有两个参数：
- setting：将要更新的参数，举例：{active:2,headerClass:'ax-lamp-group'}
- callback：回调函数，无参数
通过使用this.updateContent方法更新插件内容。该方法有两个参数：
- tab：将要更新内容的Tab，可以是数字(索引)、字符串(label值)、Dom节点(headerDom)或Tab对象
- content：将要更新内容，视该tab项的type类型而定，比如type=async，那么conteng应该是一个同域网址
- callback：回调函数，支持一个参数即本Tab对象
-
let updateIns = new axTab('#updateIns', { content: [ { label: '页签1', content: '内容1', active: true, }, { label: '页签2', content: '内容2', }, { label: '页签3', content: '内容3', }, ] }), updateParamsBtn = document.querySelector('#updateParamsBtn'), updateContentsBtn = document.querySelector('#updateContentsBtn'); updateParamsBtn.onclick = () => { updateIns.update({ active: 2, headerClass: 'ax-lamp-group', }); } updateContentsBtn.onclick = () => { updateIns.updateContent(0,'页签1更新了内容！'); updateIns.updateContent(1,'页签2更新了内容！'); updateIns.updateContent(2,'页签3更新了内容！'); } -
<div id="updateIns"></div> <a href="###" class="ax-btn" id="updateParamsBtn">更新参数</a> <a href="###" class="ax-btn" id="updateContentsBtn">更新内容</a>
销毁实例
通过使用this.destroy(callback)方法销毁实例，支持回调函数，回调无参数；销毁后可通过init初始化重新启用。
-
<div id="insDestroy"></div> <a href="###" class="ax-btn ax-primary" id="btnDestroy">立即销毁</a> <a href="###" class="ax-btn ax-primary" id="btnInit">再次启用</a> -
let insDestroy = new axTab('#insDestroy', { content: [ { label: '页签1', content: '内容1', active: true, }, { label: '页签2', content: '内容2', }, { label: '页签3', content: '内容3', } ] }), btnDestroy = document.querySelector('#btnDestroy'), btnInit = document.querySelector('#btnInit'); btnDestroy.onclick = function () { insDestroy.destroy(function () { alert('销毁了实例！'); }); } btnInit.onclick = function () { insDestroy.init(); alert('重新初始化了实例！'); console.log('查看初始化数据：'); console.log(insDestroy.data); }
在创建实例的时候会自动添加到全局实例合集当中；如果填写了实例名insName，那么可通过axInstance方法进行销毁实例。关于axInstance使用方法请点击这里。
监听事件
本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：
onInit初始化后执行，无参数onBeforeRemove删除Tab前执行，支持一个参数即删除对象，返回true将会删除tab，如果是异步的则需要使用this.remove()方法手动删除tabremove/onRemove删除Tab后执行，无参数add/onAdd增加Tab后执行，支持一个参数即增加项active/onActive激活Tab后执行，支持一个参数即激活项disable/onDisable禁用Tab后执行，支持一个参数即禁用项enable/onEanble启用Tab后执行，支持一个参数即当前启用项disableAll/onDisableAll禁用全部Tab后执行，无参数enableAll/onEanbleAll启用全部Tab后执行，无参数updateContent/onUpdateContent更新Tab内容后执行，支持一个参数即当前更新项update/onUpdate更新参数后执行，无参数destroy/onDestroy销毁后执行，无参数save/onSave保存数据后执行，无参数
演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。
-
let onIns = new axTab('#onIns', { onInit: () => { console.log('初始化完成！') }, content: [ { label: '页签1', content: '内容1', active: true, }, { label: '页签2', content: '内容2', }, { label: '页签3', content: '内容3', }, { label: '页签4', content: '内容4', }, { label: '页签5', content: '内容5', }, { label: '页签6', content: '内容6', }, { label: '页签7', content: '内容7', }, ] }), onAdd = document.querySelector('#onAdd'), onRemove = document.querySelector('#onRemove'), onActive = document.querySelector('#onActive'), onDisable = document.querySelector('#onDisable'), onEnable = document.querySelector('#onEnable'), onUpdate = document.querySelector('#onUpdate'), onContent = document.querySelector('#onContent'), onDestroy = document.querySelector('#onDestroy'), onInit = document.querySelector('#onInit'); onAdd.onclick = () => { onIns.add({ label: '新增标题', content: '新增内容', }); } onRemove.onclick = () => { onIns.remove(1); } onContent.onclick = () => { onIns.updateContent(2, '更新的内容'); } onActive.onclick = () => { onIns.active(3); } onDisable.onclick = () => { onIns.disable(4); } onEnable.onclick = () => { onIns.enable(4); } onUpdate.onclick = () => { onIns.update({ active: 3, headerClass: 'ax-lamp-group', }); } onDestroy.onclick = () => { onIns.destroy(); } onInit.onclick = () => { onIns.init(); } onIns.on('add', (tab) => { console.log('成功添加：'); console.log(tab); }).on('remove', () => { console.log('成功移除！'); }).on('active', (tab) => { console.log('成功激活：'); console.log(tab); }).on('disable', (tabs) => { console.log('成功禁用：'); console.log(tabs); }).on('enable', (tabs) => { console.log('成功禁用：'); console.log(tabs); }).on('updateContent', (tab) => { console.log('成功更新内容：'); console.log(tab); }).on('update', (tab) => { console.log('成功更新参数！'); }).on('destroy', (tab) => { console.log('成功销毁！'); }); -
<div id="onIns"></div> <div class="ax-break"></div> <a href="###" class="ax-btn" id="onAdd">增加</a> <a href="###" class="ax-btn" id="onRemove">删除</a> <a href="###" class="ax-btn" id="onActive">激活</a> <a href="###" class="ax-btn" id="onDisable">禁用</a> <a href="###" class="ax-btn" id="onEnable">启用</a> <a href="###" class="ax-btn" id="onContent">更新内容</a> <a href="###" class="ax-btn" id="onUpdate">更新参数</a> <a href="###" class="ax-btn" id="onDestroy">销毁</a> <a href="###" class="ax-btn" id="onInit">重置</a>
参数选项
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new axTab('#id',{
insName: '',//实例名称，对axInstance有用；(不应该使用update方法改变该值)
storageName: '',//是否保存当前实例数据，包括active状态、disabled状态、content数据以及更新的参数，如果需要保存请设定唯一的name，比如：'mystorage001'；(不应该使用update方法改变该值)
trigger: 'click',//页签切换的动作，默认是click点击切换，可选mouseenter、mouseover等原生事件切换
disabled: '',//页签初始化禁用项，默认为空即不使用禁用状态，支持多种格式：一个字符串/一个数字/一个DOM节点/一个对象，或以上数组
active: 0,//页签初始化焦点项，默认为0即默认以第一页为active状态，支持多种格式：一个字符串/一个数字/一个DOM节点/一个对象
content: '',//设置tab的数据源，支持数组格式数据和链接字符串，如果是链接字符串则为异步获取json
ajaxType: 'post',//异步提交的方式，默认post，可填get
headerNode: 'ul',//tab头部的节点名，默认ul
bodyNode: 'ul',//body部分的节点名，默认ul
headerChildNode: 'li',//tab头部子节点名，默认li
bodyChildNode: 'li',//body部分的子节点名，默认li
max: 0,//最多允许多少个tab页签，默认为0即不限制
closable: false,//是否显示页签的关闭按钮，默认false不显示，可选择true显示
updatable: false,//是否显示页签的刷新按钮，默认false不显示，可选择true显示
wrapperClass: '',//Tab外框节点的class类，多个用英文逗号或空格分开
headerClass: 'ax-tab-group',//header节点的class类，可定义头部风格，可填ax-tab-group、ax-btn-group或ax-lamp-group，多个用英文逗号或空格分开
bodyClass: '',//body节点的class类，多个用英文逗号或空格分开
swiper: {
enable: false,//是否让header可滚动，默认false不滚动，可填true滚动（引入axSwiper插件）
arrowShow: false,//是否显示swiper的前后按钮箭头
options: { slidesPerView: 'auto', threshold: 4 },//如果启用了scrollable，那么可填写swiper参数
},
menu: {
enable: false,//是否开启页签菜单，默认false不显示，可选择true开启
options: {
columns: 4,//设置菜单下拉窗一行几列，如果>1将使用grid布局
size: 'lg',//设置菜单下拉窗的尺寸，与axDropdown的size参数使用方法一致
}
},//menu下拉菜单功能在使用swiper之后才有效
addToActive: true,//是否在添加Tab后让新Tab成为焦点，默认true，可填false
onInit: '',//回调函数，初始化后执行，无参数
onAdd: '',//回调函数，新增项后执行，支持一个参数即新增项
onBeforeRemove: '',//回调函数，删除前执行，支持一个参数即删除项，如果返回true则将删除节点，返回false将停止操作；如果回调中有异步操作需要手动使用this.remove(item)方法删除节点
onRemove: '',//回调函数，删除项后执行，无参数
onDisable: '',//回调函数，禁用项后执行，支持一个参数即禁用项
onEnable: '',//回调函数，启用项后执行，支持一个参数即启用项
onDisableALL: '',//回调函数，全部禁用项后执行，无参数
onEnableAll: '',//回调函数，全部启用项后执行，无参数
onActive: '',//回调函数，激活项后执行，支持一个参数即当前激活项
onUpdate: '',//回调函数，参数更新后执行，无参数
onUpdateContent: '',//回调函数，Tab内容更新后执行，支持一个参数即当前更新项
onDestroy: '',//回调函数，销毁后执行，无参数
onSave: '',//回调函数，保存数据后执行，支持一个参数即localstorage值
});
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"
特殊的Tab
借助axSwiper插件制作tab切换，swiper插件用法请见axSwiper。
-
let tabNav = new axSwiper('#tab-swiper-nav', { slidesPerView: 3, }); let tabCon = new axSwiper('#tab-swiper-con', { autoHeight: true, thumbs: { swiper: tabNav, } }); -
<div class="ax-swiper ax-swiper-nav" id="tab-swiper-nav"> <div class="ax-wrapper ax-lamp-group"> <div class="ax-slide">北京</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" id="tab-swiper-con"> <div class="ax-wrapper"> <div class="ax-slide"> 北京地处中国北部、华北平原北部，东与天津毗连，其余均与河北相邻，是世界著名古都和现代化国际城市。</div> <div class="ax-slide">天津地处中国北部、海河下游、东临渤海，是中国北方最大的港口城市，国家物流枢纽，北方国际航运核心区。 </div> <div class="ax-slide"> 乌鲁木齐地处中国西北地区、新疆中部、亚欧大陆中心、天山山脉中段北麓、准噶尔盆地南缘，毗邻中亚各国，是新疆的政治、经济、文化、科教和交通中心 </div> <div class="ax-slide">重庆地处中国内陆西南部，是长江上游地区的经济、金融、科创、航运和商贸物流中心，国家物流枢纽。 </div> <div class="ax-slide"> 深圳地处中国华南地区、广东南部、珠江口东岸，东临大亚湾和大鹏湾，西濒珠江口和伶仃洋，南隔深圳河与香港相连，是粤港澳大湾区四大中心城市之一。 </div> </div> </div>