Axure实战教程：tab导航页面切换

在实现移动端和PC端高保真原型时，我们经常遇到tab页签导航，点击导航可以切换不同的页面。接下来给大家分享一下具体的实现过程。

详细步骤

1、准备一下元件：2个文本标签作为tab导航，一个矩形作为导航背景框以及一个动态面板（包含两个状态，分页放置一个矩形，代表不同的页面）

2、同时选中两个文本标签，给他们添加【鼠标悬停】和【元件选中】的交互样式。

这边设置的为悬停为字体蓝色，选中为字体蓝色和蓝色下边框线。（可以根据自己的想要效果设置样式）

3、如果同学们对动态面板不熟悉，不知道如何添加第二个状态，下面介绍两个办法，如下

1）直接在概要面板中，找到对应的动态面板，鼠标悬浮到state1上面，即可看见重复状态的小图标，点击即可复制出一个新的状态state2，只需要修改里面的对应内容即可，案例中放了一个矩形，代表页面2。

4、接下来，即可以给tab导航添加交互动作，选中第一个文本标签，添加【单击时】交互事件，选择【设置选中】交互动作，设置【当前】元件为选中，值为【真】，相关设置如下：

再添加下面的动态面板状态切换，设置其状态为【state1】，设置如下：

最终的交互设置效果如下：

5、接下来，只需要复制第一个文本的交互事件，选中第二个文本，粘贴即可。同时，需要把状态面板的状态设置为【state2】。

6、最后，为了保证tab导航点击时，只选中其中一个，则需要同时选中两个文本标签，鼠标右键，给他们添加选项组，命名为a1。具体设置如下：

7、为了保证预览时，第一个文本标签为选中，我们还需要给他勾选默认选中的效果，具体设置如下：

8、最终预览的效果如下：

附带的Axure源文件：

链接: https://pan.baidu.com/s/1ksmbFiRXeoYCTrNoWPCGkw?pwd=8c3n 提取码: 8c3n