具体到原型中，需要创建两个全局变量“id”和“ids”，id用来记录当前id，ids用来记录id串，然后在菜单和页签的“鼠标单击时”事件中增加更新ids的动作。最后在“页签”中继器的每项加载时执行判断并设置选中。

　　菜单的“鼠标单击时”用例：

　　页签的“鼠标单击时”用例：

　　页签的“每项加载时”用例：if “[[ids.indexOf(Item.id)]]”==”0″的意思就是当前id在ids中的位置是0(0代表第一位)，设置选中效果。

　　此时还需要添加一个Case2，即使上面条件不成立，我们依然需要在页签上显示菜单名称。

　　这时候我们来预览一下页面，是不是页签的选中效果已经出来了，但是竟然还有一个问题，就是切换页签的时候，页签的选中效果并没有在页签之间切换，这是为什么呢?这是因为“页签”中继器没有刷新(也就是没有重新加载)，我们需要在每次点击页签时，让其重新加载一下，实现方式就是给“页签”中继器增加一个更新操作(不需要跟新任何数据，只添加这样一个动作就可以)。

　　这次再预览，切换页签的时候，选中效果也随之切换了。到目前为止，此原型已经基本可以拿去演示了，但是如果想要精益求精，不想让原型存在一些很明显的BUG，那么我们还要继续完善，进一步解决原型存在的问题：

　　问题④：重复点击菜单会打开重复的页签，我们只想打开一个页签

　　问题⑤：我想实现关闭页签的功能

　　3.6 解决重复打开页签的问题

　　要解决此问题，我们只需要在点击菜单的时候加上判断条件即可，如果该菜单未打开(或打开后又关闭)，则执行增行操作;如果该菜单已打开，则只执行更新操作(更新ids和页面sort)。那么通过什么来判断菜单当前是不是处于打开的状态呢?答案是通过中继器的标记功能，打开时标记菜单，关闭时取消标记。

　　修改“菜单”中继器中矩形上的“鼠标单击时”用例Case1，增加判断条件及标记动作。

　　添加Case2，当菜单已被标记的时候，执行更新操作。

　　通过以上步骤，就可以避免同一个菜单打开多个重复的页签，预览原型看下效果吧。

　　3.7 关闭页签

　　由于前面打下了良好的基础，关闭页签功能的实现就比较简单了，只需要删除ids中对应的id(利用replace函数，将ids中的id替换为空以实现删除的效果)，删除页签和页面(中继器的删除行功能)，然后再取消菜单的标记(中继器的取消标记功能)就可以了。(如果没有关闭按钮，现在“页签”中继器中增加一个关闭图标)

　　设置关闭按钮的“鼠标单击时”用例。

　　到这里，原型已经基本完成了，然后去预览一下，随意的去点击菜单，切换或关闭页签，你会发现效果非常理想。当然仍然还有一些可以优化的地方，比如控制最多打开的页签数，比如重复点击当前显示的页签不再刷新页面等等，那么这些问题留给大家去自行研究吧，当然有问题可以与我交流。

　　4. 经验总结

　　其实，画原型并没有统一的标准，是要低保真还是高保证。就好比做项目，同样的需求，一个月有一个月的做法，一个星期有一个星期的做法。而画原型也是，同样的功能，根据不同的用途可以有不同的画法，可简可繁。另外对于一些复杂的原型，在考验你工具熟练度的同时，也是在考验你的逻辑思维能力。Axure RP不仅仅是原型工具，画原型也不仅仅是“画”原型。

　　#专栏作家#

　　RAEDME大鹏，人人都是产品经理专栏作家，微信公众号raedme