AxureRP分页签 / Tab选项卡切换功能~
最终结果图如下:

实现过程:
1、从元件库中拖一个动态面板,调整所需大小,接下来的步骤都通过双击动态面板来完成。
2、双击动态面板,弹出框“面板状态管理”,新建状态并命名。此处新建了TAB1、TAB2、TAB3...(需要几个tab根据自己需求)。

3、再次双击动态面板(之后要再修改控制面板的内容都双击),弹出“面板状态管理”。双击TAB1,进入tab1编辑页面。
在tab1界面,拖动一个大矩形,三个小矩形。调整位置将三个小矩形的底部和大矩形的顶部重合(这里可以放大来看,一定要重合)。

4、选中tab1,点击矩形右上角的小圆点,选择底部无框的矩形,此时tab1的底边就不见了。
这个步骤完成后如果tab1的底部线还在,那就再检查一遍tab1小矩形的底部与大矩形的顶部线框有没有不重合(如步骤三)。


效果图:

再给tab2和tab3添加背景颜色:

5、重点来了:选中tab1,添加交互动作“鼠标单击时”,双击“鼠标单击时”,弹出窗,进行相关设置如图片所示。


6、将tab2、tab3重复步骤 2~5,在各自的大矩形框内写上各自的内容~
AxureRP分页签 / Tab选项卡切换功能~的更多相关文章
- Axure实现Tab选项卡切换功能
		这几天用Axure画原型图的过程中,须要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以能够用Axure中的动态面板(Dynamic Panel)来实现. 本文以已经汉化的 ... 
- 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据
		LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ... 
- LayUI的基本使用 - Tab选项卡切换显示对应数据
		要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ... 
- react tab选项卡切换
		Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ... 
- 微信小程序Tab选项卡切换大集合
		代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ... 
- 纯CSS实现tab选项卡切换
		<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ... 
- 下拉菜单效果和tab选项卡切换
		//下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ... 
- 纯js实现网页tab选项卡切换效果
		纯js实现网页tab选项卡切换效果 百度搜索 js 点击菜单项就可以切换内容的效果 
- jQuery Tab选项卡切换代码
		jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ... 
随机推荐
- k8s添加凭证
			请参照:https://www.cnblogs.com/effortsing/p/10013441.html 
- [LeetCode] 59. Spiral Matrix II 螺旋矩阵 II
			Given an integer n, generate a square matrix filled with elements from 1 to n^2 in spiral order. For ... 
- [LeetCode] 278. First Bad Version 第一个坏版本
			You are a product manager and currently leading a team to develop a new product. Unfortunately, the ... 
- jenkins自动化回滚阿里云k8s应用版本
			jenkins 服务器需先保留着原先构建的不同版本的应用镜像 [root@jenkins sh]# docker images|grep "maintain" registry-v ... 
- Python虚拟环境Virtualen简单使用
			安装pip 使用脚本安装和升级pip 要安装或升级pip,需要下载 get-pip.py. 地址:https://bootstrap.pypa.io/get-pip.py 然后运行以下命令 (需要管理 ... 
- java面试 (八)- 关于减少if else
			if else一般不建议嵌套超过三层,如果一段代码存在过多的if else嵌套,就会严重降低可读性.那么如何降低if else的嵌套数呢? 1:把接口分为外部和内部接口,所有空值判断放在外部接口完成: ... 
- 使用objcopy实现将文件编译进执行程序
			一.简介 工作中可能遇到将一个文件编译进执行程序的需求,例如bin文件.jpg文件等等.实现的方法可以使用脚本来将文件内容写入一个新的C源文件数组,达成编译进程序的目的. 现在介绍一种简单.快捷的方 ... 
- 用vue实现列表分页和按钮操作
			为中华之崛起而读书 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ... 
- java lambda怎么表达式判断被调用接口名称和接口中方法
			1.首先能够用于lambda表达式的只能是interface,并且interface 中只有一个方法. 这就说明,只要找到接口类型就能确定用的是哪个方法.(如下:intTypeInterface.St ... 
- Tomcat logs文件夹下不同文件的意义
			tomcat每次启动时,自动在logs目录下生产以下日志文件,按照日期自动备份 localhost.2016-07-05.txt //经常用到的文件之一 ,程序异常没有被捕获的时候抛出的地 ... 
