如何实现TAB切换的复杂动态效果

如何实现TAB切换的动态效果

1

首先想好一个需要tab切换效果的主题，这里我选择学生查看任课教师对他上交的作业的批改情况，需要查看的包括老师给自己作业的分数和评语，老师对全班作业的点评以及发布哪些同学的作业可以参考，最后能看到自己本次作业提交了什么内容，根据这个主题，进行三种内容的切换。

2

拖拽三个矩形，调整成高35，宽110的按钮样式，并列排好，在按钮上分别写上“作业批阅结果”“作业总体点评”“我的作业内容”，然后在按钮的下方再拖拽一个矩形，我们将在矩形区域显示不同的内容，如下图：

3

在矩形区域添加第一个按钮要显示的内容，然后选中内容和矩形，右键转换为动态面板！

注意：为什么不直接拖拽一个动态面板呢？直接拖拽也是可以的，但是先添加动态面板再往里面写内容的鼠标操作比这么做要麻烦，这里提供一种便捷方法，后面还会陆续提到其他的便捷方式来提高原型制作效率。

4

转换成动态面板后，双击面板，在弹出的动态面板管理对话框中对面板进行命名“学生查看已批阅作业”，然后对面板的状态1重命名为“作业批改结果”，代表这个状态里面包含的作业批改结果相关信息

5

接下来，还要在这个面板管理对话框中增加两个面板状态，分别用来显示作业总体点评信息和学生的作业内容信息，并按照步骤4进行重命名，如下图

6

下面给步骤5新添加的两个状态添加显示内容，再axure界面的右下方有一个动态面板管理区，可以看到我们刚刚做好的动态面板的名字以及所包含的所有状态，双击状态“作业总体点评”添加内容，然后重复本步骤将所有的内容添加好，如下图：

7

下面是最关键的设置了，点击按钮显示对应的内容

首先选择按钮“作业批阅结果”，在页面的右侧部件属性面板中对“onclick(点击时)”事件添加用例，在弹出的用例面板中选择“设置面板状态为指定状态”，在右侧配置动作下找到刚刚我们添加的“学生查看已批阅作业”动态面板，在选择状态中指定显示第一个状态“作业批阅结果”。如果你希望点击后显示内容时有点特效，在进行进行动画中进行设置

8

接下来设置第二个按钮“作业总体点评”，按照步骤6设置显示动态面板的状态2“作业总体点评”，然后设置第三个按钮，如下图：

9

生成原型，在浏览器中预览这个TAB切换效果吧，生成原型时可以选择浏览器，不过有些浏览器需要一些设置，如chrome，这里选择IE，如下图

10

在IE中我们点击三个按钮，看到内容已经随着按钮变化了，而且还有淡入淡出的效果哦~

当我们使用Axure进行原型设计时，在同一个页面上单击不同的按钮来显示不同的内容，这可以通过动态面板来实现。如果你想在a页面点击不同的按钮，你想如何在B页面显示不同的内容下面就来教你Axure9如何利用全局变量实现跨页面传值！对于准备自学或者正在自学Axure的小伙伴，那么我建议你学习体验的Axure自学视频课，0基础到案例实操，全面学习~

Axure9利用全局变量实现跨页面传值方法：

一、交互效果说明

点击「首页」金刚区的按钮，跳转至「分类」页面，选中对应的Tab选项，切换显示对应的内容。

效果预览：

二、交互效果制作

1创建两个页面，分别命名为「首页」和「分类」。

2在「首页」中拖入一个圆形和一个文本标签，设置好颜色和文本，右键设置为组合，命名为人文-Botton，再复制出4个完全相同的组合，分别进行命名和设置，页面其他内容可自定义。

3在「分类」页面中拖入一个矩形,设置文本内容为“人文”，将其命名为「人文-Tab」；在右侧交互面板中给其添加元件选中的样式图所示，设置选项组名称为「Tab组」。

4给文本标签「人文-Tab」添加鼠标单击时选中当前元件的交互。

5设置完成后，再复制出四个相同文本标签分别命名和设置文本内容，这样Tab就制作完成了。

6制作出「分类」页面的内容部分，内容可自定义，制作好后选中内容右键转化为动态面板，再复制出4个状态，分别进行命名。

7给「Tab组」的5个文本标签分别添加选中时的交互，切换到内容面板的对应状态。

接下来我们需要通过设置全局变量来储存我们的数据，在「首页」中点击按钮给全局变量赋值，然后在「分类」页面中载入时通过判断全局变量的值，显示不同的面板状态。

8点击顶部菜单项目-全局变量设置，添加一个全局变量，命名为「BottonVariable」，默认值为空。

9接下来分别给金刚区的5个按钮组合添加鼠标单击时的交互，分别设置变量值为「renwen」「lishi」「sheke」「yishu」「yinyue」；均设置跳转链接至「分类」页面。

这里需要保证在载入「分类」页面前已经赋值成功，所以设置变量值的交互要在跳转链接之前。

10在「分类」中添加页面载入时的交互，分别添加情形及对应的选中效果，如下：

变量值「BottonVariable」为renwen时，设置动作为选中矩形元件「人文—Tab」；

变量值「BottonVariable」为lishi时，设置动作为选中矩形元件「人文—Tab」；

变量值「BottonVariable」为sheke时，设置动作为选中矩形元件「社科—Tab」；

变量值「BottonVariable」为yishu时，设置动作为选中矩形元件「艺术—Tab」；

变量值「BottonVariable」为yinyue时，设置动作为选中矩形元件「音乐—Tab」。

做完这一步，就完成整个效果了

以上就是关于“Axure9如何利用全局变量实现跨页面传值？”的全部精彩内容分享了，希望你能从中有所收获哦！如果觉得一篇文章不够尽兴，那么Axure相关文章可别错过！总而言之，学习道路，单一知识是很难成就自我全面发展的！想要全面精通擅长一个技能，那么学习也得全面！来，全面学习Axure，综合获取知识点，快速有效促成独立自主原型设计~

标签栏切换在Axure生产中有两个优点:1、维护成本低:标签切换容易修改，用最简单的方法就可以达到一定要求的效果，比如在产品中使用常见的master，大大提高了操作的便利性。2、复用性高:易于批量操作，使不同的TAB对应不同的功能，多次使用互不影响。那么，Axure如何使标签页之间切换备注：为准备学习Axure、正在学习Axure的小伙伴提供了专业系统的Axure自学视频课，视频教学，知识点清晰，方便快速地掌握~

Axure制作Tab栏切换不同页面效果教程：

首先我们先拉取三个矩形作为tab栏，分别标注tab1、tab2、tab3作为备用，实际可根据需要标注。

选中三个矩形，点击右键选择选项组，设置为同一选项组选中三个矩形，点击右键选择交互样式，设置矩形的交互样式，在这里我只设置了一种样式：线段颜色，实际可根据需要进行设置。接着拉去一个动态面板放置tab栏下方，用于点击tab栏进行切换分别复制动态面板1、2、3，放置相关功能信息选择tab1，点击右键进行选中接着对tab1进行设置交互，点击元件，设置单击时-设置选中-当前元件再次设置交互，设置单击时-设置面板状态-tab1分别对tab2和tab3进行交互设置，设置完成后查看预览

以上即是关于“Axure怎么制作Tab栏切换不同页面效果？”的分享内容了，希望能够帮助到你~！更多Axure原型技巧，尽在Axure相关文章！很多小伙伴学习Axure都选择了在网上学习，但是很多都是东拼西凑的学，以致于学习到和实际操作的可能就有所出入了~所以学习Axure，还是系统化比较好！选择的Axure自学视频课，相信能够给予你知识的收获以及动手实操的经验~

可以按照以下步骤操作：

1、首先在文字与页码数之间插入制表符，将光标放到文字与数字后面，按一下Tab键。

2、然后选中文字和页码数，切换到“开始”选项卡的“段落”选项组右边的“段落设置”按钮。

3、在弹出的“段落”对话框中，点击“制表位”。

4、在弹出的“制表位”对话框中，任意选择一个位置，例如38作为制表位位置，对齐方式选中“右对齐”，前导符选中“（2）”，然后单击“确定”按钮。

5、OK，一张用制表符制作的目录就完成啦。

制表位就是用来对齐文字的。word里面有五种制表位分别是：左制表位、右制表位、居中制表位、小数点制表位、竖线制表位。制表位的位置如图所示。你点击可以在五种不同的制表位之间切换。切换到需要的制表位后，在水平标尺上单击，就会在单击处设置一个制表位位置。然后你按Tab键，就可移动到这个位置。