3. 编辑元素
tab制作流程图
tab即标签列表，用于实现同级标签内容之间的切换，即选中标签，标签内容区显示对应标签的内容。
tab流程图如下：
根据流程图所示，制作tab的第一步就需要判断tab的标签和内容是否分离。这里需要先了解在wide中添加标签与内容不分离的tab是什么样子的，这部分将在下面详细介绍。只要是使用标签与内容不分离的tab无法达到需要效果的都属于标签与内容分离的tab。
1 标签与内容不分离的tab制作
1_1 添加tab
想页面中添加不分离的tab有两种做法：
第一种在布局页面进行添加，如下图所示，直接在“脚本区块”中拖拽“Tabs”。
第二种方法是在“页面编辑”页面中，插入“标签列表”，如下图所示
1_2 修改标签内容
在tab标签上右键，鼠标移到“tab控制区”上，在出现的列表内可进行添加、删除tab页和删除整个tab的操作，如下图
点击“添加标签页”，在“区域2”的后面添加一个新的标签页，标签是“区域1”。如图所示：
1_3 填充内容
“标签”和“标签内容”都是可以进行更改的，内容也不局限于文字，将新添加的标签页进行修改，如下图：
“删除标签页”删除选中的标签页，“删除标签列表”是删除整个tab。
2 标签与内容分离的tab制作
2_1 添加tab内容区
在“页面编辑”页面中插入“标签内容区”，如下图所示
在“标签内容区”右键，可以在“tab内容区”中进行，添加、删除内容区和查看每页内容区的内容，如下图所示
插入“标签内容区”会默认添加2个标签页，在内容区右键，移到“tab内容区”点击“添加页”，此时页面仍显示第一个标签页的内容，但实际已经添加上新的标签页了，可以在“tab内容区”中点击“下一页”进行查看，第三个页面就是新添加的页面。
“删除页”、“删除内容区”的功能类似于“删除标签页”和“删除标签列表”。
在“标签内容区”右键，点击“编辑DIV”，在“高级”中查看内容区的ID，并复制内容区的ID，如下图，此内容页的ID为“tabpan-193885”。内容区的每个内容页的ID都是不同的，目的是为了与tab的标签进行关联。
2_2 添加tab标签并与内容区关联
在页面编辑中输入作为标签的内容，以“评价”为例，选中“评价”右键，点击“逻辑”，在弹出的对话框中选中“逻辑”，在“产生某效果”后面的下拉框中选中“显示tab”其余默认。如下图所示：
点击“产生某效果”后面的“高级编辑”按钮，在弹出的对话框中添如上面复制的内容区的ID。需要注意，添加ID是要在ID前面添加“#”。如下图所示
点击“保存”，回到“逻辑设置”页面，点击“增加操作”，在点击“确定”即完成tab标签与内容区的关联。如下图所示
如需制作多个tab页，只要在“标签内容区”中添加新的内容页，再通过内容页的ID将内容页与对应标签进行关联即可。
在添加多个标签时，为简便操作可使用列表进行添加，在布局页面中“基础CSS”可添加“有序列表”和“无序列表”，如下图所示以“无序列表”为例。
进入“页面编辑”页面，右键列表，点击“列表操作”中的“列表设置”，在弹出的对话框中选中“居中内联列表”、“鼠标点击单项激活”，勾选“使用默认激活样式”。如下图所示
发布后的效果如下所示：
- 苹果
- 香蕉
- 柠檬
- 桔子
- 项目符号
- 海王星行动
点击“添加空列表项”，会在鼠标选中的列表项的后面添加一个新的列表项，以上面列表为例，如果鼠标点击在“苹果”的文字上，然后右键，选中“添加空的列表项”，效果如下所示：
- 苹果
- 这是新列表项
- 香蕉
- 柠檬
- 桔子
- 项目符号
- 海王星行动
“克隆当前列表项”即如果鼠标点击在“苹果”的文字上进行右键，然后点击“克隆当前列表项”，就会的“苹果”的后面复制一个“苹果”。需要注意，如果“苹果”已经关联了“标签内容区”，那么克隆的“苹果”与原来的关联的是同一个“标签内容区”，而不是一个新的内容区，换言之，即这个两个“苹果”标签，选中任意一个后，显示的是同一个内容，如果修改内容区里面的元素，两个标签显示的内容都改变。
“上移（下移）当前列表项”就是将选中的标签进行向上（向下）移动，如果是横向的列表就表现为想前（向后）移动，如果当前元素为列表中的第一个元素时，“上移当前列表项”会变为不可选状态；同样的当前元素为列表中的最后一个元素时，“下移当前列表项”会变为不可选状态。
“删除其他列表项”就是删除除了当前选中的列表项外的所有列表项。