左侧菜单对应切换右侧内容

该博客介绍了如何利用内联框架制作交互式的页面内容切换效果。首先,通过隐藏滚动条设置内联框架作为内容展示区。接着,创建多个子菜单页面并设置交互效果,当点击左侧菜单时,右侧内联框架加载相应内容。最后,设定默认显示的子页面,以实现打开链接即显示指定内容。
摘要由CSDN通过智能技术生成

1.用内联框架做内容展示区域

拖动一个内联框架来做内容展示区域,但是放上去是有滚动条的,我们需要勾选“隐藏边框”来隐藏掉滚动条。然后根据自己的需要看是否需要页面进行滚动,我这面是选择了“从不滚动”。

2.制作需要跳转子页内容

在页面新建一个“一级菜单”页面,然后再新建一个子菜单1,然后做出子菜单1 的内容。同理给其它几个子菜单也做出子页面。全部做完后,回到page 1页面下。

 选中子菜单1,然后在交互效果里添加“框架中打开链接”,目标选择“内联框架”,链接到刚刚创建的“子菜单1”的内容也就可以了。同理,把其它的子菜单页面也都挂上链接。

2.设定首页是默认页面

 如果您需要打开链接就看到第一个默认的页面是子菜单1 ,那么就选中内联框架,然后在右侧内联框架的样式面板下方选择“子菜单1”(如图所示),这样再预览的时候,默认第一个看到的页面就是你设定的页面了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue是一种流行的JavaScript框架,用于构建用户界面。在一个基于vue开发的网站或应用程序中,左侧菜单栏可以用来导航不同的页面或功能,而右侧页面内容则用于显示具体的页面内容。 具体来说,通过在vue中使用组件的方式,我们可以轻松地实现左侧菜单栏控制右侧页面内容切换。首先,我们需要创建一个父组件,用于包含左侧菜单栏和右侧页面内容。接着,在父组件中定义一个data属性,用于记录当前选中的菜单项或页面。然后,我们可以在父组件的模板中使用<router-view>标记来动态展示右侧页面内容。 在左侧菜单栏中,我们可以使用vue-router来定义不同的路由。每个路由对应一个菜单项,并且指定要显示的组件。当用户点击菜单项时,vue-router会根据路由规则自动切换对应的页面,并将选中的菜单项记录到父组件的data属性中。这样,右侧的<router-view>标记就会根据选中的菜单项显示相应的页面内容。 使用vue的组件和路由机制,我们可以轻松地实现左侧菜单栏控制右侧页面内容切换。这种方式在创建大型网站或应用程序时非常方便,可以提高开发效率和用户体验。同时,vue还提供了丰富的工具和指令,帮助我们实现复杂的页面切换效果和动画。总之,vue是一个很好的选择,用于构建拥有左侧菜单栏控制右侧页面内容切换功能的网站或应用程序。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值