Axure实现tab页面切换功能

devtools/2024/11/15 4:53:07/

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反之

在这里插入图片描述


http://www.ppmy.cn/devtools/19861.html

相关文章

深度学习基础:循环神经网络中的长期依赖问题

循环神经网络中的长期依赖问题 在深度学习中,循环神经网络(RNN)是一种经典的模型,用于处理序列数据,如自然语言处理、时间序列预测等任务。然而,传统的RNN存在着一个长期依赖问题,即在处理长序…

【蓝桥杯省赛真题38】python字符串拼接 中小学青少年组蓝桥杯比赛 算法思维python编程省赛真题解析

目录 python字符串拼接 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python字符串拼接 第十三届蓝桥杯青少年组python编程省赛真题 一、题目…

关于WSL2下安装的mysql sever服务,如何在host或外部连接使用的问题

快速提示: 在wsl2下,不允许在外部使用root来登录mysql,所以必须使用非root的帐号来登录 所以,如果明白如何做了,下面的步骤就不必看了。 下面是,给小白用户的教程: 步骤 1: 首先,使用 WSL 命令…

MATLAB初学者入门(12)—— 模拟退火算法

模拟退火(Simulated Annealing, SA)是一种概率性搜索技术,用于寻找给定函数的全局最优解。该算法受到物理学中固体退火过程的启发,通过模拟物质冷却过程中粒子的随机运动,来逐步寻找优化解。它允许在搜索过程中偶尔接受…

日期操作类 + http、https 请求工具类 + 开发环境 忽略 SSL 验证工具类 + 二维码工具类

日期操作类 package com.pay.common.util;import java.text.SimpleDateFormat; import java.util.Date; /*** 日期操作类* 创建者 科帮网* 创建时间 2017年7月31日*/ public class DateUtils {private final static SimpleDateFormat sdfYear new SimpleDateFormat("yyy…

【接口测试】JMeter接口关联测试

‍‍1 前言 我们来学习接口管理测试,这就要使用到JMeter提供的JSON提取器和正则表达式提取器了,下面我们来看看是如何使用的吧。 2 JSON提取器 1、添加JSON提取器 在线程组右键 > 添加 > 后置处理器 > JSON提取器 2、JSON提取器参数说明 N…

CTFshow-PWN-栈溢出(pwn39)

32位的 system(); "/bin/sh" 检查: 32 位程序 使用 ida32 分析 跟进 ctfshow 函数 buf 到 ebp 距离:0x12 代码解释: 声明了一个长度为 14 的字符数组 buf,数组大小为14字节,用来存储用户输入的数据&#…

阿里云物联网平台 | 透传与ICA标准数据格式(Alink JSON)| 定值SDK非动态注册与动态注册 | SOC+4G模组移植方案

文章目录 一、透传与ICA标准数据格式(Alink JSON)二、定值SDK选非动态注册还是动态注册三、SOC4G模组移植方案 一、透传与ICA标准数据格式(Alink JSON) 透传和ICA标准数据格式(Alink JSON)是物联网设备与阿…