Axure实现tab页面切换功能

1. 实现效果

在这里插入图片描述

2. 实现原理

  1. 创建两个标签,并实现点击时选中状态
  2. 点击时,设置面板状态

3. 实现步骤

3.1 实现可切换的标签

  1. 在页面上拖拽两个矩形作为两个tab标签,并命名 tab1 和 tab2

  2. 设置每个矩形的边框显示,只显示下边框即可

样式->线段->可见性,设置下边框可见即可,设置边框样式为背景色

  1. 设置交互样式:选中时,线段和字体显示为选中的颜色

  2. 添加点击事件

新建交互-> 单击时->设置选中,单击tab1时候,将tab1设置为选中状态,将tab2设置为非选中状态,单击tab2时相反。

在这里插入图片描述

在这里插入图片描述

3.1 实现tab切换页面

  1. tab下添加一个矩形,设置为动态面板

  2. 双击进入动态面板,复制两个状态,创建出两个一样的面板
    在这里插入图片描述

或在左侧,重复状态添加两个

在这里插入图片描述

  1. 添加点击联动效果

在这里插入图片描述
tab1点击时候,设置面板状态为State1,tab2反之

在这里插入图片描述

相关推荐

  1. js实现tab切换

    2024-04-26 18:56:03       34 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-26 18:56:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-26 18:56:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-26 18:56:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-26 18:56:03       20 阅读

热门阅读

  1. BootLooder引导传参和镜像编译

    2024-04-26 18:56:03       14 阅读
  2. Git忽略文件

    2024-04-26 18:56:03       11 阅读
  3. ES6 新增功能复盘梳理

    2024-04-26 18:56:03       13 阅读
  4. python 学习笔记24 图片视频修复

    2024-04-26 18:56:03       10 阅读
  5. 掩码讲解,以及生成

    2024-04-26 18:56:03       12 阅读
  6. Nginx下php连接到GBase 8s数据库 - ODBC方式

    2024-04-26 18:56:03       27 阅读
  7. uniapp 页面滚动到指定位置的方法

    2024-04-26 18:56:03       14 阅读
  8. 【学习笔记】

    2024-04-26 18:56:03       15 阅读
  9. CDN引入Vue3

    2024-04-26 18:56:03       13 阅读