在《常用样式设置（2）》中，我们实现了一个七牛云的商品卡片。
之后，在《动态样式的按钮》我们对购买按钮进行了动态样式的处理。
当用户点击购买按钮之后会打开新的页面，在新的页面中仍然可以选择不同的套餐。
以“短信类别”为例。
我们能够看到，当鼠标指针进入选项时，选项的文字变为了蓝色。
当点击某一套餐的选项时，选项的样式整体发生了改变。
很显然，这是交互样式的作用。
这里我们需要用到“鼠标悬停的样式”与“元件选中的样式”。
温馨提示：关于本案例中交互样式的设置，可以参考《Axure的7种交互样式（1）-鼠标的交互样式》与《Axure的7种交互样式（3）-选中的交互样式》。
在画布中放入一个文本标签元件和两个矩形元件，设置好默认的文字与样式。
为两个矩形选项添加“鼠标悬停的样式”，将文字颜色设置为蓝色，颜色代码“00A0DE”。
再为两个矩形选项添加“元件选中的样式”，将文字与边框的颜色设置为蓝色，颜色代码为“00AAE7”，填充颜色设置为浅蓝色，颜色代码“E5F6FD”。
完成交互样式的设置之后，我们添加交互事件，让每个矩形选项被[单击时]都能变为[选中]的状态。
以第一个选项为例，另一个选项设置相同。
此时，在浏览器中查看原型的话，已经能够点击选项改变颜色了。
但是，此时所有的选项都能改变颜色，没有实现只能选中其一的效果。
所以，我们还要通过给所有选项添加相同的[选项组]来实现唯一的选中。
温馨提示：如果不了解什么是选项组，请先学习《元件属性中的组》。
此时还有一个小问题。
仔细看上图就会发现，两个选项中间的边框是灰色的。
这是因为当前选项的边框被另一选项的边框给遮盖了。
所以，我们还需要给每个选项添加一个交互动作，当选项被[单击时]将[当前]选项[置于顶层]。
到这里，我们就完美的完成了这个案例。
不习惯看文字教程？还有《Axure RP 9萌新修炼视频》奉上！
转载请注明：iaxure.com » 唯一选中的选项