Axure画原型图教程：tab页签组件

画原型图使用比较多的一个组件形式——tab页签，之前一直用多个动态面板来设置tab页签的选中和未选中状态，比较复杂且麻烦，最近发现了一个简单便捷的方法，分享给大家，先展示一下最终效果，感兴趣的就一起来试一下吧~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

首先我们先画几个矩形，分别写上页签名称（我这里就直接写页签1234），当前矩形的样式就是你页签未选中状态下的样子（我这里是无边框+黑色字体，大家可以根据自己的需求设置）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

我们选中添加的几个页签，在右侧【交互】栏，点击【显示全部】会出现一个【选项组】，我们给这个选项组命名（我这里就起名“tab页签”）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

现在给每个页签设置选中效果，选择一个页签，在右侧【交互】栏，【交互样式】选择【元件选中样式】进行样式的编辑，我这边是希望选中的元件文字颜色改变，并且下方会出现选择线，将每一个页签都设置选中样式，可以直接复制粘贴。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

具体操作如下图，可参考。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

如果还想鼠标悬停的时候也有相应效果，也可以参照上一条进行【鼠标悬停样式】编辑。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

现在需要的就是在每次点击到对应的元件时，元件为选中状态：选择元件，在右侧【交互】栏新建交互，选择【单击时】-【设置选中】-【当前元件值为真】，将每一个页签都设置选中交互，可以直接复制粘贴，具体操作如下图，可参考。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

其实到这一步我们的效果已经出来了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

但是感觉好像缺了点啥，按理说我进入这个页面应该会有一个默认选中的tab页签，这个时候我们就需要对页面载入时默认选中的tab页签添加一个交互了：在右侧【交互】栏新建交互，选择【载入时】-【设置选中】-【当前元件值为真】。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

上一步完成之后效果如下，页面载入时就会默认选中第一个tab页签。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

这个时候搭配一个动态面板，就可以实现切换tab页签，展示不同的内容了，我们添加一个动态面板（我这里命名为内容展示），新增4个state，分别命名为1234，每个state内放入对应需要展示的内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

接下来我们添加对应的交互就ok了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

完成啦，现在来看一下最终效果吧~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/58285.html