Axure 9.0 教程：用动态面板制作Tab切换 - 人人都是产品经理

... 浪费时间还打击自信。

本文作者基于Axure 9.0版本，对制作Tab切换的每一个步骤和细节都进行了详细的讲解，与大家分享。

案例要点通过动态面板设置不同. Axure9.0教程：用动态面板制作Tab切换 西瓜汤圆 2020-09-17 2评论 1.9万浏览 53收藏 5分钟 释放双眼，带上耳机，听听看~！ 00:00 00:00 导读：Tab切换是很多网站必备交互，然而很多论坛教程并不完整，产品小白一步一步照着做，可能仍无法实现效果，浪费时间还打击自信。

本文作者基于Axure9.0版本，对制作Tab切换的每一个步骤和细节都进行了详细的讲解，与大家分享。

案例要点 通过动态面板设置不同页面内容，n个tab设置n个状态； 拖动矩形作为按钮，设置矩形选中状态； 设置tab按钮的点击事件，设置动态面板的状态切换。

详细步骤 1、拖动一个矩形做tab，这里我想做一个女装男装童装三个tab切换，先拖动一个矩形，把矩形命名为女装（给形状命名习惯要养成），ps：先拖一个矩形就好，方便设置完交互再一波复制。

2、拖动动态面板，给动态面板添加状态，做几个tab页添加几种状态。

我这里设置了女装、男装、童装三种状态。

（动态面板命名为服装品类tab）。

每种状态下放对应的页面内容，我这里以文字示意。

3、给tab按钮设置交互。

选中女装按钮，点击交互下的编辑按钮进入交互编辑器。

在编辑器中，添加事件——单击时，添加两个动作： 设置面板状态，目标【服装品类tab】到state【女装】； 设置选中，目标【当前元件】，设置【值】，到达【真】。

第一步操作是为了链接tab按钮和动态面板的状态，表示单击女装按钮进入动态面板女装页面； 第二步操作表示单击操作时，该元件状态为选中，注意这一步非常重要，只有这样我们设置元件【选中】时的【交互样式】才能实现，比如单击女装时女装按钮高亮显示。

4、单击形状属性旁的显示全部，给女装按钮设置选项组（名称可自定义，我这设置服装tab组），设置选项组才能达成单选目的。

5、设置按钮的交互样式。

这里可以设置悬停、选中、禁用等状态的交互样式。

我这里设置选中时的样式为背景填充黄色。

与第3步的单击操作设置选中结合，最终形成了单击按钮时黄色高亮的交互。

6、复制女装按钮两次，修改每个按钮对应交互信息，形状名称改为男装/童装，单击时面板状态到男装/童装。

7、最后一步，设置按钮女装的默认状态是选中，表示打开时默认选中女装tab。

最终效果 预览一下即大功告成。

tab切换也有其他做法，但是动态面板更容易理解，大家可以一试，有问题可以在评论区交流。

  本文由@西瓜汤圆原创发布于人人都是产品经理，未经作者许可，禁止转载。

题图来自Unsplash，基于CC0协议。

给作者打赏，鼓励TA抓紧创作！ 赞赏 更多精彩内容，请关注人人都是产品经理微信公众号或下载App 1年Axure9.0教程初级动态面板 收藏已收藏|{{postmeta.bookmark}} 点赞已赞|{{postmeta.postlike}} 西瓜汤圆 1篇作品 1.9万总阅读量 为你推荐 SaaSERP：自定义状态流的订单锁定与释放 06-22 钞票飞舞、版图重构：再谈海外视频流媒体产业格局 06-24 一文读懂元宇宙 11-29 我的品牌方法论 01-27 设计师如何在设计中讲好故事？ 07-01 大数据分析，到底在分析什么？ 11-17 评论 评论请登录 em 如果是悬停切换效果是不是只要把单击事件换成悬停就可以了呢？ 2021-08-06 回复 汪仔2043 棒。

言简意赅，通俗易懂 2021-01-27 回复 为你推荐 什么样的同学适合做数据分析？ 从项目制到产品制，企业内部管理平台的落地实践 元宇宙“头茬韭菜”开割：付费课、杀猪盘、会员费、加盟代理 圈子 QQ群|微信群 私域流量交流群加入 数据产品经理群加入 文案学习交流群加入 短视频学习交流加入 营销增长学习群加入 运营交流群 扫码加我拉你进群 请注明：姓名-公司-职位 以便审核进群资格，未注明则拒绝 加入 产品交流群 扫码加我拉你进群 请注明：姓名-公司-职位 以便审核进群资格，未注明则拒绝 加入 短视频交流群 扫码加我拉你进群 请注明：姓名-公司-职位 以便审核进群资格，未注明则拒绝 加入 起点课堂课程白piao 扫码加我拉你进群 请注明：姓名-公司-职位 以便审核进群资格，未注明则拒绝 加入 大学生实习就业群 扫码加我拉你进群 请注明：姓名-公司-职位 以便审核进群资格，未注明则拒绝 加入 私域运营交流群 扫码加我拉你进群 请注明：姓名-公司-职位 以便审核进群资格，未注明则拒绝 加入 热门文章 B端Dashboard设计指南（一） 03-23 一篇文章讲清楚硬件产品经理如何进行ID评审 09-14 产品设计：医疗信息化——产业目标导入 07-02 用好数据，构建营销提效与增长新路径 10-30 新家装：后互联网家装时代的新蓝海 07-26 SaaS产品之路——需求篇 08-26 产品经理这个职业是吃“青春饭”吗？ 听到很多言论说在中国程序员是吃青春饭的，那么产品经理呢，也吃青春饭吗？ 520.9K点击184回答 进入回答 文章导航 案例要点 详细步骤 最终效果