Axure RP中添加Tab切换效果

期望效果如下所示

目标效果

①添加三个文本框，并设置下边框的显示效果

添加标题并设置下边框

【样式】页中，设置Border如红框所示→设置只显示下边框

②思考一下，我们对文本框效果的要求应该是鼠标移动上去的时候，字变成蓝色，单击之后，下边框变粗，并且文字变成蓝色。

于是，我们需要添加鼠标MoveOver和Selected的效果

鼠标MoveOver的效果

鼠标单击的效果

接下来，3个Tab是需要连动的，并且，默认选择是推荐

画重点，要将所有的tab页进行连动，必需设置选项组名称为一样

对推荐页进行设置

将推荐页效果复制给其它2个Tab，并设置选项组名称和选中状态

操作GIF

④添加交互页面

设置动态面板方式：

对目标单击鼠标右键→【Create Dynamic Panel】

添加文本框和文字，并且设置动态面板，效果如下图所示

⑤对各Tab设置单击切换选中效果和动态面板状态的动作

推荐Tab的鼠标单击效果

榜单Tab的鼠标单击效果

分类Tab的鼠标单击效果

由此，完成了Tab切换效果，如开文所示。