axure9实用操作实现索引列表鼠标点击其中一项高亮显示

1.需求说明

实现索引列表鼠标点击其中一项高亮显示

如以上两图，当鼠标点击索引列表中某一项时，该行进行高亮显示，点击另外一行时，高亮行进行切换

2.实现步骤

1. 创建两个不同颜色内容相同的图层，位置相同，如下概要视图，"数字"与"选中数字"内容和位置都一样，其中"选中数字"的颜色为蓝色高亮，"数字"的颜色为默认灰色，两个图层是重叠的， "数字"在"选中数字"的上方
   
2. 给"数字"下成员"数字1"添加交互事件，如下图，给"数字1"添加3个交互事件
   a.“鼠标按下-置于顶层” 交互事件，将"数字"置于顶层,该交互事件可以实现鼠标按下时，"数字"图层上移，页面上展示的效果是全部都没有选中
   b.“鼠标松开-置于顶层” 交互事件，将"选中数字"下的"数字1选中"置于顶层,该交互事件可以实现鼠标松开时，"数字1选中"图层上移，页面上展示的效果是"数字1"被选中了，高亮显示
   c.“载入时-置于顶层” 交互事件，将"选中数字"下的"数字1选中"置于顶层,该交互事件实现页面打开使，默认"数字1"被选中
3. 给余下的"数字"下成员"2、3、4、5、6"添加交互事件，如下图，给"数字2"添加2个交互事件
   a.“鼠标按下-置于顶层” 交互事件，将"数字"置于顶层,该交互事件可以实现鼠标按下时，“数字"图层上移，页面上展示的效果是全部都没有选中
   b.“鼠标松开-置于顶层” 交互事件，将"选中数字"下的"数字N选中”(N分别代表2、3、4、5、6)置于顶层,该交互事件可以实现鼠标松开时，"数字N选中"图层上移，页面上展示的效果是"数字N"被选中了，高亮显示
   
   给数字2~6添加完雷同的交互事件后，当鼠标点击索引列表中某一项时，该行进行高亮显示的效果配置就完成了