<#-- 标题 -->

标签页：

标签页是参考tabnav设计出更简单易用的内容重叠布局的导航页。标签页使用nav和section作为是标签和内容显示。在nav中使用li表示每个标签，在section中使用div作为每个标签显示的内容。

<#-- 一、无边框和无标题，标签在左侧 -->

一、无边框和无标题，标签在左侧

标签一内容

标签二内容

标签三内容

1、定义一个div，包含属性[data-role="z-tabnav"]和[class="z-tabnav"]
2、在div下包括两大元素nav和section。其中nav表示标签部分，section表示内容显示部分
3、在nav中通过ul和li把标签设定好，如例子中标签一、标签二、标签三。其中有[class="z-active"]的表示当前激活标签
4、在section中对应li编写三个标签内容div和li个数和顺序对应。其中有[class="z-active"]的表示当前激活标签，[class="z-pd10"]表示标签内容内边距10px

<#-- 二、无边框和有标题，标签在右侧，内容有边框 -->

二、无边框和有标题，标签在右侧，内容有边框

标签一内容

标签二内容

标签三内容

1、定义一个div，包含属性[data-role="z-tabnav"]和[class="z-tabnav"]
2、在div下包括两大元素nav和section。其中nav表示标签部分，section表示内容显示部分
3、在nav中通过ul和li把标签设定好，如例子中标签一、标签二、标签三。其中有[class="z-active"]的表示当前激活标签
4、在section中对应li编写三个标签内容div和li个数和顺序对应。其中在section中定义[class="z-pd-t20"]表示所有标签内容顶部内边距为20px
5、在section标签内容中[class="z-active"]的表示当前激活标签，[class="z-pd10"]表示标签内容内边距10px，[class="z-bd z-bd-rd5"]表示标签内容有5像素圆角边框

<#-- 三、有边框和有标题，标签在右侧，加大字体 -->

三、有边框和有标题，标签在右侧，加大字体

标签一内容

标签二内容

标签三内容

1、定义一个div，包含属性[data-role="z-tabnav"]和[class="z-tabnav z-bordered"]表示有边框
2、在div下包括两大元素nav和section。其中nav表示标签部分，section表示内容显示部分
3、在nav中通过ul和li把标签设定好，如例子中标签一、标签二、标签三。其中有[class="z-active"]的表示当前激活标签
4、在section中对应li编写三个标签内容div和li个数和顺序对应。其中有[class="z-active"]的表示当前激活标签，[class="z-pd10"]表示标签内容内边距10px

${zhiqim_com_chapter()}