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.mfbz.cn/a/568884.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Flutter 上架如何解决 ITMS-91053 问题

最近,我的 Flutter App 发布到 TestFlight 后,就会收到一封邮件:The uploaded build for YOUR APP has one or more issues. 上面的邮件主要是说,我的 App 缺少了调用 API 的声明,以前从来没看到过,上网一查…

WEB攻防-ASP中间件IIS文件上传解析安全漏洞

漏洞原理: 基于文件 IIS6.0默认不解析;号后面的内容,例如1.asp;.jpg会当成1.asp解析,相当于分号截断。 基于文件夹 IIS6.0会将/*.asp/文件夹下的文件当成asp解析。 案例: 写一个木马文件,并改为jpg后缀 GIF89agif8…

宁盾LDAP统一用户认证与单点登录:构建高效安全的企业身份认证

在信息化时代,企业面临着众多的应用系统和数据资源,如何有效地管理和保护这些资源,确保信息安全和高效利用,成为了企业信息化建设的核心问题。LDAP统一用户认证和单点登录(SSO)作为一种高效、安全的身份验证…

windows与linux搭建svn环境并自动更新代码

SVN搭建以及自动更新代码 目录 一、windows安装svn并且转成中文 第1步:先下载安装包如下下面是语言包与安装包 第2步:双击安装包一直点击下一步即可 第3步:双击安装中文语言包 第二步:勾选设置语言包 二、linux安装svn 第1步…

pycharm远程连接server

1.工具–部署–配置 2.部署完成后,将现有的项目的解释器设置为ssh 解释器。实现在远端开发 解释器可以使用/usr/bin/python3

构建安全高效的前端权限控制系统

✨✨谢谢大家捧场,祝屏幕前的小伙伴们每天都有好运相伴左右,一定要天天开心哦!✨✨ 🎈🎈作者主页: 喔的嘛呀🎈🎈 ✨✨ 帅哥美女们,我们共同加油!一起进步&am…

GDPU unity游戏开发 碰撞体与关节

让你设计的角色跑起来吧,可以是动画,也可以是碰撞器的运动。 运动小车 找到小车素材,导入到层级面板。然后可以新建一个地面让小车在上面运动,新建一个方块当障碍物。 摆放好后,要加组件。记住,在unity中运…

idea上传项目到gitee(码云)

1、打开码云,新建仓库 2、创建 3、这就是创建成功的页面 4、复制仓库地址,后面需要用到 2、打开我们的项目:例如我现在的项目 1、idea创建git仓库 2、选择我们项目文件夹的目录 3、查看文件是否变色,变色表示成功了 4、添加到缓…

unity cinemachine相机 (案例 跟随角色移动)

安装相机包 打开包管理工具 在 unity registry 搜索cinemachine 会在maincamera中生成一个组件cinemachineBrain 只能通过虚拟相机操控 主相机 虚拟相机的参数 案例 1.固定相机效果 位置 在固定的地方 默认的模式 2.相机跟随人物效果 焦距设置 20 跟随设置 把playere…

10.MMD 室内场景导入背景视频和灯光

导入背景视频 1. 导入人物和场景 场景是Akali’s room,可以在墙壁上添加视频 先添加主场景 2. 修改视频文件格式 在背景里选择导入背景视频文件 需要将mp4视频格式转化为AVI格式 方法一 先将视频导入格式工厂 点击配置 将视频编码改成DivX 再开始处理 …

【解决NodeJS项目无法在IDEA中调试的问题】使用JetBrains IDEA 2023 调试nodejs项目

项目采用Ant Design Pro React,使用前后端分离开发方式,后端可以很容易的打断点调试,但是前端通过网页进行调试,在IDEA中加了调试断点,但是没有什么用处。 解决方案如下: 点击新建运行配置 新建JavaScrip…

BERT-CRF 微调中文 NER 模型

文章目录 数据集模型定义数据集预处理BIO 标签转换自定义Dataset拆分训练、测试集 训练验证、测试指标计算推理其它相关参数CRF 模块 数据集 CLUE-NER数据集:https://github.com/CLUEbenchmark/CLUENER2020/blob/master/pytorch_version/README.md 模型定义 imp…

李沐60_机器翻译数据集——自学笔记

!pip install d2limport os import torch from d2l import torch as d2l下载和预处理数据集 在这个将英语翻译成法语的机器翻译问题中, 英语是源语言(source language), 法语是目标语言(target language)。…

交互式探索微生物群落与生态功能的关系

微生物群落在生态系统中发挥则重要功能,我们在对微生物群落进行分析时,会将不同分类水平(从门到属)的微生物类群的相对丰度与测定的某一生态功能进行相关性分析。但由于微生物类群数较多,又有不同的分类水平&#xff0…

DeepFaceLab小白教程:视频换脸过程

合适那些人阅读? 适合从未使用过DeepFaceLab的群体。 如果你想基于DeepFaceLab完成一次视频换脸的操作,可以看本篇。 下载方式 GitHub https://github.com/iperov/DeepFaceLab 我是用motrix下载。 网盘 https://pan.baidu.com/share/init?surlO4…

详解数据结构:队列(含栈与队列扩展)

一、顺序队列 有一种线性序列,特点是先进先出,这种存储结构称为队列。队列也是一种线性表,只不过它是操作受限的线性表,只能再两端操作:一端进、一端出。进的一端称为队尾,出的一端称为队头。队列可以用顺…

【笔记django】创建一个app

创建app 错误 raise ImproperlyConfigured( django.core.exceptions.ImproperlyConfigured: Cannot import rules. Check that dvadmin.rules.apps.RulesConfig.name is correct.原因 刚创建的rules的app被手动移动到了dvadmin目录下 而dvadmin/rules/apps.py的内容还是&…

系统设计 --- E2E Test System

系统设计 --- E2E Test System 什么是E2EE2E Architecture Example 什么是E2E E2E(端到端)测试是一种软件测试方法,旨在模拟真实的用户场景,测试整个应用程序或系统的端到端功能和交互流程。E2E 测试涵盖了从用户界面到后端系统的…

OpenHarmony实战开发-合理运行后台任务

简介 设备返回主界面、锁屏、应用切换等操作会使应用退至后台。为了降低设备耗电速度、保障用户使用流畅度,系统会对退至后台的应用进行管控,包括进程挂起和进程终止。为了保障后台音乐播放、日历提醒等功能的正常使用,系统提供了受规范约束…

iptables实现docker容器动态端口映射实操

背景 之前在《Docker 动态修改容器端口映射的方法》一文中,说明了如何使用修改配置和加防火墙规则实现动态端口映射。但是没有具体分享加防火墙实现动态端口映射的实际案例。今天就分享一下实际操作案例,供大家参考。 分析 动态端口映射的用途 容器端口…
最新文章