最终结果图如下:

实现过程:

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选项卡切换功能~的更多相关文章

  1. Axure实现Tab选项卡切换功能

    这几天用Axure画原型图的过程中,须要实现Tab选项卡切换的效果,但Axure中并没有类似于Tab控件的部件,所以能够用Axure中的动态面板(Dynamic Panel)来实现. 本文以已经汉化的 ...

  2. 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

    LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...

  3. LayUI的基本使用 - Tab选项卡切换显示对应数据

    要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...

  4. react tab选项卡切换

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

  5. 微信小程序Tab选项卡切换大集合

    代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  6. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  7. 下拉菜单效果和tab选项卡切换

    //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  8. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  9. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

随机推荐

  1. Python使用偏函数与类实现装饰器

    # -*- coding: utf-8 -*- # author:baoshan # python对某个对象是否能通过装饰器形式使用只有一个要求:decorator必须是一个可被调用的对象. # 我们 ...

  2. jdbc如何处理事务

    Connection提供了事务处理的方法,通过调用setAutoCommit(false)可以设置手动提交事务:当事务完成后用commit()显式提交事务:如果在事务处理过程中发生异常则通过rollb ...

  3. 本地jar包上传docker容器

    先安装docker的注册服务器: [root@VM_0_7_centos ~]# docker run -d -p : --restart=always --name registry2 regist ...

  4. [转自baidu]修正古人五行,《七行说》之提出

    一.论原五行相生.相克关系不妥之处: 祖国医学原“五行说”即金.木.水.火.土.在五行学说中说相生规律为:金生水:水生木:木生火:火生土:土生金.相克规律为:火克金:金克木:木克土:土克水:水克火.这 ...

  5. UI Automator 介绍

    简介 Android 4.3发布的时候包含了一种新的测试工具–uiautomator,uiautomator是用来做UI测试的.也就是普通的手工测试,点击每个控件元素 看看输出的结果是否符合预期.比如 ...

  6. 当代码上传git时,提示Repository not found The requested repository does not exist, or you do not have permission to access it. fatal: Could not read from remote repository. Please make sure you have the corre

    1.检查当前git中设置的用户名与邮箱是否与自己电脑上的一致. 看这个文件中 如果不一致,只需要把里面的内容全部复制出来添加到git(看下图位置) 这是再执行:git push -u origin m ...

  7. 【视频开发】【Live555】摄像头采集,264编码,live555直播(0)

    参看 有关live555 1.首先需要修改live555,定义从 内存中直接获取source而不是从文件读取source的类. 自己实现的类命名为 H264FramedLiveSource   /* ...

  8. 八、spring生命周期之BeanPostProcessor

    BeanPostProcessor我们一般称为Bean的后置处理器,它与我们前面介绍的InitialingBean.init-method等一样,都是在bean的初始化时被调用,具体的用法我们在举例中 ...

  9. ref,out,int参数复习

    ref 结构是值类型,按值传递.通过关键字ref,也可以通过引用传递结构. public static void ChangeA(ref A a) { a.X = ; } //如果A是结构类型,就添加 ...

  10. [转帖]抢先AMD一步,英特尔推出新处理器,支持LPDDR5!

    抢先AMD一步,英特尔推出新处理器,支持LPDDR5! http://www.eetop.cn/cpu_soc/6946240.html 2019.10 intel的最新技术发展. 近日,知名硬件爆料 ...