Axure9 |顶部导航:点击顶部导航标签切换到对应页面

时间:2024-03-20 07:01:29

实现效果:
Axure9 |顶部导航:点击顶部导航标签切换到对应页面
第一步:新建三个矩形为顶部导航,添加导航标签名称(例如选项一、选项二、选项三);
Axure9 |顶部导航:点击顶部导航标签切换到对应页面
第二步:设置选项选中属性,这里设置选中选项时显示蓝底白字;
Axure9 |顶部导航:点击顶部导航标签切换到对应页面
第三步:同时选中三个选项,右键,将他们设置为选项组

  • 这个操作的目的是:当选中一个选项时,其他选项就无法呈现选中状态。即某个选项选中为真,其他选项选中就默认为假;
    Axure9 |顶部导航:点击顶部导航标签切换到对应页面
    第四步:在页面合适的位置放置动态面板,添加3个动态面板的状态(state),State1(页面1)对应选项一,State2(页面2)对应选项二,State3(页面3)对应选项三;实际工作中,页面里面设置不同内容,在这里不同页面用不同填充色区分。
    Axure9 |顶部导航:点击顶部导航标签切换到对应页面
    第五步:逐个设置单击选项的交互:以选项一为例,单击时,设置选中,当前的值为真,同时设置面板状态,STATE当中选择State1(页面1);同理设置完选项二、选项三的交互。
    Axure9 |顶部导航:点击顶部导航标签切换到对应页面
    Axure9 |顶部导航:点击顶部导航标签切换到对应页面通过以上五个步骤,就可以实现点击导航标签切换到不同页面的效果啦。