Axure实现tab页面切换功能

news2024/12/28 20:24:04

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.coloradmin.cn/o/1619775.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Oracle使用内部包自定义创建表空间和用户

如果之前有类似的表空间,可以使用dbms自动生成对应的表空间和数据文件 select dbms_metadata.get_ddl(TABLESPACE,ts.tablespace_name) from dba_tablespaces ts; 可以使用类似的 SQL> set echo off SQL> spool /data/logs/create_tablespace.log SQL> select dbms…

【安卓13】解决带GMS编译报super分区空间不足错误

1、错误信息 2、解决方案 不同供应商修改分区大小的文件路径不一样,但是万变不离其宗,根据报错信息全局搜索关键词BOARD_SUPER_PARTITION_SIZE 这里以RK供应商和AML供应商修改为例: (1)RK改法: 根目录下…

uniapp配置了pages.json 的 tabbar 国际化,小程序切换语言没有实时切换

如上图,按照uniapp官方文档配置了tabbar的国际化 但是微信小程序实时切换语言没有实时刷新 解决方案: 在App.vue中加入以下代码: 在onLaunch中执行方法即可

Springboot+Vue项目-基于Java+MySQL的图书馆管理系统(附源码+演示视频+LW)

大家好!我是程序猿老A,感谢您阅读本文,欢迎一键三连哦。 💞当前专栏:Java毕业设计 精彩专栏推荐👇🏻👇🏻👇🏻 🎀 Python毕业设计 &…

ctfshow——XSS

文章目录 XSS介绍什么是xss&#xff1f;XSS危害XSS的分类常用XSSpayload web316——反射型XSSweb317——过滤<script> web318——过滤script、imgweb319——不止过滤script、imgweb320——过滤空格web321——不止过滤空格web322——不止过滤空格web323web324web 325web32…

代码质量与可维护性的重要性都有哪些?

目录 一、为了提高代码质量&#xff0c;可以采取以下几种方法&#xff1a; 二、如何制定和执行有效的代码编写规范&#xff1f; 三、设计模式和设计原则在提高代码质量中的具体应用案例有哪些&#xff1f; 四、代码审查的最佳实践和技巧是什么&#xff1f; 五、如何有效地…

面包屑新玩法,ReactRouter+Ant Design实现动态渲染

在Ant Design中,可以通过Breadcrumb组件结合react-router库实现动态生成面包屑导航。具体步骤如下: 定义路由配置数据结构 我们需要在路由配置中添加额外的面包屑相关信息,例如面包屑标题、icon等。例如: const routes [{path: /,breadcrumbName: 首页},{path: /users,brea…

echarts图表柱状图实现左右滑动

柱状图中实现下边或右边的左右滑动效果

【电控笔记5.7】Notch-Filter滤波器

Notch-Filter滤波器 通过阻尼比&#xff0c;限制陡峭程度 阻尼比小&#xff0c;比较陡峭&#xff0c;对周围信号干扰比较小&#xff0c;衰减度小 总结 实现&#xff1a;转换成Z转换进行伯德图验证

UE5、CesiumForUnreal实现建筑白模生成及白模美化功能

1.实现目标 在专栏上篇文章基于GeoJson文件生成城市级白模(本文建筑白模数量12w+)的基础上修改,计算法线和纹理坐标,并基于特定材质进行美化,美化后的白模GIF动图如下所示: 文章目录 1.实现目标2.实现过程2.1 基于Cesium材质美化2.1.1实现原理2.1.2 C++代码2.1.3 蓝图应…

Whatsapp在中国下架了?这招教你解决!

今天有一个紧急的消息要告诉大家&#xff0c;根据最新的电信办要求&#xff0c;苹果手机的中国应用商店已经下架了WhatsApp&#xff01;这意味着&#xff0c;如果你的苹果设备是在中国大陆地区注册的&#xff0c;那么你将无法直接在App Store搜索到WhatsApp。 但是&#xff0c;…

SQL基础(关系模型)

目录 SQL及定义域概念 SQL是什么 定义域 关系简介 关系的定义 关系的封闭性 关系模型简介 关系模型 谓词逻辑 运算基础 SQL的加减乘除 SQL的除法1 SQL的除法2 SQL的除法3 三值逻辑 NULL的危害 消除NULL SQL及定义域概念 SQL是什么 Structured Query Languag…

2024.4.23

const char *p; 指针变量地址可改变&#xff0c;指向的地址的值不可变 const (char *) p; 指针变量地址可改变&#xff0c;指向的地址的值不可变 char *const p; 指针变量地址不可改变&#xff0c;指向的地址的值可变 const char* const p; 地址…

TDengine高可用探讨

提到数据库&#xff0c;不可避免的要考虑高可用HA&#xff08;High Availability&#xff09;。但是很多人对高可用的理解并不是很透彻。 要搞清高可用需要回答以下几个问题&#xff1a; 什么是高可用&#xff1f;为什么需要高可用&#xff1f;高可用需要达到什么样的目标&am…

刷代码随想录有感(45):二叉树的最大深度

题干&#xff1a; 力扣这里给了定义&#xff1a;二叉树的最大深度指的是从根节点开始&#xff0c;到最远叶子所经过的节点数。 代码&#xff1a; class Solution {//递归实现 public:int maxDepth(TreeNode* root) {if(root NULL)return NULL;int leftheight maxDepth(root…

MySQL中的并发控制,读写锁,和锁的粒度

MySQL中的并发控制&#xff0c;读写锁&#xff0c;和锁的粒度 并发控制的概述 在数据库系统中&#xff0c;并发控制是一种用于确保当多个用户同时访问数据库时&#xff0c;系统能够提供数据的一致性和隔离性的机制。MySQL支持多种并发控制技术&#xff0c;其中包括锁机制、多…

IP-guard getdatarecord 存在任意文件读取

声明 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 一、产品介绍 IP-guard是由溢信科技股份有限公司开发的一款终端安全管…

勾八头歌之RNN

一、RNN快速入门 1.学习单步的RNN&#xff1a;RNNCell # -*- coding: utf-8 -*- import tensorflow as tf# 参数 a 是 BasicRNNCell所含的神经元数, 参数 b 是 batch_size, 参数 c 是单个 input 的维数&#xff0c;shape [ b , c ] def creatRNNCell(a,b,c):# 请在此添加代码…

typedef 定义函数指针

typdef int(*FUNC_TYPE)(int,int) FUNC_TYPE p NULL; 定义了一个函数指针 函数指针作为函数的参数的用法demon

批量提取SemEval 2014 Task 4-aspect_term的xml文件为csv

批量提取SemEval 2014 Task 4-aspect_term的xml文件为csv 数据data 格式 <sentence id"892:1"> <text>Boot time is super fast, around anywhere from 35 seconds to 1 minute.</text> <aspectTerms> <aspectTerm term"Boot time&…