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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/316367.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pyQt5 和 Qt Designer 实现登录注册案例

Qt Designer 设计页面: 通过 PyQt5 手写 1. 先引入用到的库 from PyQt5.QtWidgets import * import sys 2. 创建应用,窗口, 设置窗口 # 创建应用 app QApplication(sys.argv) # 创建窗口 w QWidget()# 设置窗口标题 w.setWindowTitle("注册登录")# 展示 w.sho…

使用STM32CubeMX对STM32F4进行串口配置

目录 1. 配置1.1 Pin脚1.2 RCC开启外部晶振1.3 时钟1.4 串口配置 2. 代码2.1 默认生成代码2.1 开启串口中断函数2.3 接收中断2.4 接收回调函数2.5 增加Printf 的使用 1. 配置 1.1 Pin脚 1.2 RCC开启外部晶振 1.3 时钟 外部使用8MHz晶振 开启内部16MHz晶振 使用锁相环 开启最高…

Android CalendarView助你打造精美的Android日历应用

Android CalendarView助你打造精美的Android日历应用 1. 引言 移动应用中的日历功能对于用户来说至关重要,它不仅是时间管理的工具,还能帮助用户记录重要事件和安排活动。因此,一个高效、易用的日历控件对于移动应用的成功至关重要。 传统…

计算机视觉 | 交通信号灯状态的检测和识别

Hi,大家好,我是半亩花海。本项目旨在使用计算机视觉技术检测交通信号灯的状态,主要针对红色和绿色信号灯的识别。通过分析输入图像中的像素颜色信息,利用OpenCV库实现对信号灯状态的检测和识别。 目录 一、项目背景 二、项目功能…

大数据学习笔记14-Hive基础2

一、数据字段类型 数据类型 :LanguageManual Types - Apache Hive - Apache Software Foundation 基本数据类型 数值相关类型 整数 tinyint smallint int bigint 小数 float double decimal 精度最高 日期类型 date 日期 timestamps 日期时间 字符串类型 s…

[Algorithm][链表][两数相加][两两交换链表中的节点][重排链表][合并K个升序链表][K个一组翻转链表] + 链表原理 详细讲解

目录 0.常用技巧1.两数相加1.题目链接2.算法原理详解3.代码实现 2.两两交换链表中的节点1.题目链接2.算法原理详解3.代码实现 3.重排链表1.题目链接2.算法原理详解3.代码实现 4.合并 K 个升序链表1.题目链接2.算法原理详解3.代码实现 5.K 个一组翻转链表1.题目链接2.算法原理详…

蓝网科技临床浏览系统 deleteStudy SQL注入漏洞复现(CVE-2024-4257)

0x01 产品简介 蓝网科技临床浏览系统是一个专门用于医疗行业的软件系统,主要用于医生、护士和其他医疗专业人员在临床工作中进行信息浏览、查询和管理。 0x02 漏洞概述 蓝网科技临床浏览系统 deleteStudy接口处SQL注入漏洞,未经身份验证的恶意攻击者利用 SQL 注入漏洞获取…

喀秋莎Camtasia2023中文破解Crack下载附安装教程 2023免费补丁百度云 电脑版注册机提取

Camtasia2023破解版是一款备受好评的电脑录屏软件,主要用于教授课程,培训他人,以及进行沟通和屏幕分享。内置视频编辑器支持拖放文本,提供了强大的屏幕录像、视频的剪辑和编辑、视频菜单制作、视频剧场和视频播放功能等&#xff0…

如何编写测试用例

总结 测试用例需求来源 文档 用户角度 编写测试用例步骤 分析需求 写测试点 对需求的拆分 辅助完成测试用例的编写 编写测试用例 编写测试用例原则 能看懂 能执行 测试结果状…

【研发管理】产品经理知识体系-产品创新中的市场调研

导读:在产品创新过程中,市场调研的重要性不言而喻。它不仅是产品创新的起点,也是确保产品成功推向市场的关键步骤。对于产品经理系统学习和掌握产品创新中的市场调研相关知识体系十分重要。 目录 概述:市场调研重要性 1、相关概…

大象机器人开源协作机械臂myCobot 630 全面升级!

1. 开篇概述 在快速发展的机器人技术领域中,Elephant Robotics的myCobot 600已经证明了其在教育、科研和轻工业领域的显著适用性。作为一款具备六自由度的机械臂,myCobot 600以其600mm的工作半径和2kg的末端负载能力,满足了多样化的操作需求。…

人工 VS AGV无人搬运机器人,AGV赋能中国智能制造

agv 机器人作为智能制造的重要抓手,正在渗透到各个传统行业,成为我国制造业转型升级的焦点。未来,智能AGV将不仅仅是简单的把货物搬运到指定的位置,而是要把5G技术、大数据、物联网、云计算等贯穿于产品的设计中,让智能…

【CGALDotNet】二维矢量多边形可视域计算(C#调用CGAL)

参考 CGALDotNet快速开始:https://blog.csdn.net/liqian_ken/article/details/138274933 CGAL二维可视域计算介绍:https://doc.cgal.org/latest/Visibility_2/index.html#visibility_2_introduction CGAL相关接口:https://doc.cgal.org/late…

c#数据库: 6.查询成绩合格的学生/7.输出全部学生信息

SQL Server Management Studio Management Studio 中的学生信息表: 查询上图成绩合格的学生信息,并将信息从控制台输出 using System; using System.Collections.Generic; using System.Data; using System.Data.SqlClient; using System.Linq; using System.Text…

【设计模式】简单工厂模式(Simple Factory Pattern)

工厂模式(Factory Pattern) 用于创建不同类型的奖品对象。您可以创建一个奖品工厂,根据配置的类型来实例化相应的奖品对象。 public interface Prize {void award(); }public class MoneyPrize implements Prize {Overridepublic void awar…

基于Sping Boot集成的websocket实现聊天室

Spring Boot整合WebSocket实现聊天室 Spring Boot 提供了 Websocket 组件 spring-boot-starter-websocket,用来支持在 Spring Boot环境下对Websocket 的使用。 下面我们就以多人在线聊天室为例,演示 Spring Boot 是如何整合Websocket 实现服务端消息推…

U盘格式转换GPT格式转回DOS

当前格式 fdisk /dev/sdb# 在 fdisk 提示符下,输入以下命令删除分区: d # 选择要删除的分区编号(如 1、2 等) w开始转换 [rootnode-24 ~]# fdisk /dev/sdbWelcome to fdisk (util-linux 2.37.4). Changes will remain in memory o…

使用opencv改变图片大小

使用opencv改变图片大小 图片的宽度和高度效果代码 图片的宽度和高度 宽度:图片的宽度指的是图像从左边缘到右边缘的水平跨度。在数字图像中,宽度通常是以像素(pixels)为单位来度量的。高度:图片的高度指的是图像从上…

推荐一个wordpress免费模板下载

首页大背景图,首屏2张轮播图,轮换展示,效果非常的炫酷,非常的哇噻,使用这个主题搭建的wordpress网站,超过了200个,虽然是一个老主题了,不过是经得起时间考验的,现在用起来…

CUDA架构介绍与设计模式解析

文章目录 **CUDA**架构介绍与设计模式解析**1** CUDA 介绍CUDA发展历程CUDA主要特性CUDA系统架构CUDA应用场景编程语言支持CUDA计算过程线程层次存储层次 **2** CUDA 系统架构分层架构并行计算模式生产-消费者模式工作池模式异步编程模式 **3** CUDA 中的设计模式工厂模式策略模…