效果如下所示：

原理也很简单，就是通过标签切换动态面板的状态。其中主要有三个知识点，即动态面板的基本使用、选项组以及指示线的移动。动态面板的基本使用可以查看https://www.axurechina.com/thread-35463.htm。

选项组

选项组就是将只能一个选项处于选中状态的组合，通过设置选项组，我们只需要触发元件动作上进行设置选中的操作，即可使目标元件成为唯一的选中状态，无需手动去取消其它元件的选中状态。比如我们有三个标签，全部选中后右键选中选项组，然后指定组名即可。

然后为为所有选项统一设置选中后的状态

最后为每个标签设置单击事件，动作元件为设置选中即。

指示线的移动

选中标签后，位于标签下方的指示线移动到当前标签的下方，图示中为水平移动，因此指示线的x坐标发生变动，因此只要确定了标签的水平间隔，然后设置移动的x值即可。比如我们添加的指示线的初始位置为（0，31），而三个标签的初始x坐标为0, 123， 249。因此我们在设置指示线到达的位置时，y坐标不变，而x坐标就是三个标签的x坐标。当然，如果指示线的宽度和标签宽度不一致的，且其初始x坐标不为0，则将其初始x坐标加上标签的x坐标即是指示线移动的x坐标。

以上是假设标签位置在最终页面中不会发生移动的情况，当时如果标签位置发生变化，则会出现错乱，如下所示。

由于指示线相对于标签的位置是确定的，刚好位于标签的底边上，因此我们可以用函数获取当前标签的坐标值，指示线的x坐标就是标签的x坐标，指示线的y坐标在标签的y坐标基础上加上标签的高度即可，如果指示线不是正好在标签的底部，只需要加上指示线相对于标签左上角点的偏移即可。

最终效果如下所示。

https://www.axureshop.com/shop/24308中有一些综合实战案例，欢迎大家下载交流学习。