[Axure 笔记]标签页的切换交互实现（1）

要实现的交互要求如下：

点击如下图所示的三个不同标签页时，被点击标签处于激活状态（显示白色），其它标签显示灰色，并且下面的矩形方框显示内容跟随不同标签被激活而显示不同的内容。

第一种方法是最基本的方法，但实例中会涉及到很多 Axure 相关的知识点。

1）控件的显示和隐藏由动态面板来实现。

2）标签实际上各有两种状态，及激活和未激活，分别对应不同的显示颜色。

3）动态面板不能添加点击事件，即标签转化为动态面板后就不能再在上面添加点击事件了。因此需要再多准备一组标签用来点击。因此从视觉上，我们需要准备三组标签（两组转化为动态面板）来实现这个功能。

4）为了处理在点击标签的过程中，动态面板不调到顶层从而影响后续点击操作，需要将未转化为动态面板的标签置顶显示。而为了对应激活与否的不同状态显示，这三个标签需要设置为透明色，从而显示下层动态面板的颜色。

5）为了在页面加载时，默认状态显示第一个标签页激活（显示白色），需要添加一个页面加载时间——当页面加载时，隐私第一竖排标签页的未激活动态面板控件。

对于下面矩形显示框的动态变化处理：

点击 1、2、3 不同的标签页时，将对应的矩形动态面板显示置顶。或者事件表述为当前显示，其它两个隐藏。

三组标签页也可以采取矩形动态面板同样的处理方式。

这种方法虽然繁琐，但是涉及到的知识点和需要注意到的地方还是比较多的，需要对各种控件的功能和特性比较熟悉。