点击左侧菜单栏-右侧跟着滑动（楼层导航）

最新推荐文章于 2026-06-22 16:41:47 发布
原创 最新推荐文章于 2026-06-22 16:41:47 发布 · 347 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#javascript #html #前端 #vue.js
本文介绍了一个使用 Vue 实现的左侧菜单组件案例，该组件能够在点击菜单项时使对应的内容区域平滑滚动到可视范围内。通过监听菜单索引的变化并利用原生 JavaScript 的 scrollIntoView 方法实现这一功能。 
<div class="menu-item" :class="{'selected-btn': index===menuIndex}" @click="handleActive(item,index)"> // 左侧菜单
watch: {
    menuIndex: function(val) {
      const card = document.querySelectorAll('.detail-items')
      card[val].scrollIntoView({
        behavior: 'smooth'
      })
    }
}

左侧导航栏和右侧页面跳转实现（JavaScript）
DevRevolt的博客
10-06 1162
导航栏在网页设计中起到了重要的作用，它可以帮助用户快速地导航到不同的页面。本文将介绍如何使用JavaScript实现一个左侧导航栏，并实现点击导航项时右侧页面的跳转。你将看到一个带有左侧导航栏和右侧内容的页面。当你点击导航项时，页面将跳转到相应的URL。首先，我们需要创建一个HTML文件，并添加必要的结构和样式。在上述代码中，我们通过HTML和CSS创建了一个具有固定宽度和背景颜色的左侧导航栏（你可以根据需要更改HTML文件中的页面URL以及导航栏和内容的样式。方法将页面跳转到指定的URL。
后台——侧边和面包屑导航栏设计与实现方案
forever__fish的博客
01-06 2107
后台管理系统最重要的功能之一无疑是导航的设计，不管是侧边导航栏还是头部面包屑导航栏，导航与路由如何去匹配是开发人员需要去考虑的问题。点击侧边导航栏的某一项可以跳转到当前页面的路由，头部面包屑导航也会按照当前路由显示相应的导航。
【vue+a链接动态锚点】监听滚动事件，实现动态锚点。左侧菜单列表，右侧内容区，点击快速定位+滑动到对应内容区高亮对应菜单项
花椒和蕊的博客
04-21 4554
这个效果花了两天的时间，终于实现 ，可以点击快速定位，也可以滑动左侧对应高亮 主要用到a标签的动态锚点，scrollIntoView方法，监听元素的滚动事件 1、a标签的动态锚点 实现方式以我理解的如下： 通过a标签的href属性与其他元素（如div）的id相对应，给a链接加点击事件，让点击的id等于容器的id，实现“id”定位,因为用了div包裹a标签 并且for循环，所以好像不用写href属性，有key就行了。 因为项目里大量使用此功能，为了方便，所以把左侧菜单列表进行了封装，其实也可以都写在父组件中
左右菜单联动：轻松实现网页导航的高效与便捷！
CRMEB小程序商城的博客
12-18 2078
去获取当前的所有节点集合，再配合 scroll-view 的 scroll-top 属性，使其在点击左侧菜单栏的时候动态赋值右侧scroll-view 的 scroll-top 属性，从而实现点击左侧菜单栏时右侧内容区域进行滚动。
左边导航右边内容切换 php,jquery ajax实现点击左侧菜单栏，右侧对应div处加载相关页面并显示...
weixin_29221191的博客
03-12 973
ym.php:数据发布#box{width:900px;margin:20px auto 0px;padding-left:25px;background:orange;border-radius: 10px;}.text{width:870px;height:100px;margin-top: -20px;font:bold 25px/1em '黑体';resize: none;}input{w...
HTML实现点击左侧菜单，右侧内容切换
liyibao111的博客
04-27 5317
使用iframe标签，在html项目实现
侧面导航栏以及如何添加子窗体
学习微软 .net 技术开发
06-22 1203
版权声明：本文为博主原创文章，转载请在显著位置标明本文出处以及作者网名，未经作者允许不得用于商业目的。 今天有网友咨询如何设计主窗体，使它左侧显示按钮导航，右侧显示子窗体。 后来想了一下还是挺简单的： 窗体设计： form1（主窗体） 其它子窗体（这里主要演示，只设计了2个子窗体） form2： form3: form2和form3的formborderstyle属性设置为none。 在Form1中的代码如下： Dim loc As Point Dim cur
vb.net侧边栏图形菜单
xjnzhidao的博客
08-07 4508
VB6时代，做侧边栏菜单非常困难，一般都要用到第三方控件，但是在VB.net中，做侧边栏图形菜单非常方便，先看效果： 这是菜单选中效果： 这些菜单都是用Label控件做的，容器是用的Panel控件，用的代码很少，具体做法：1、拖放一个panel控件在窗体左边，设置BackgroundImage属性，加入一张漂亮的背景图，设置BackgroundImageLayout属性，有平铺、居中、缩
[VB.NET]单元三 常用控件的使用
VB.NET学习网-VB.NET实例、VB.NET教程、VB.NET源码下载
11-30 2765
  单元三 常用控件的使用<!--google_ad_client = "pub-8333940862668978";/* 728x90, 创建于 08-11-30 */google_ad_slot = "4485230109";google_ad_width = 728;google_ad_height = 90;//--><script type="text
左侧多菜单的上下滚动效果实现
qq_29459903的博客
10-20 924
1.用动态面板制作滚动条素材 拖动动态面板画一个容器，鼠标选中后，右键选择滚动条→垂直滚动，给他命名为上层。 再拖动一个动态面板画一个比它长的矩形，用来盛放需要滑动的长内容，然后给长动态面板命名为下层。在概要面板视图里，调整两个图层的上下位置。 然后复制之前做好的菜单列表，粘贴到下层的动态面板里面。退出编辑窗口，内容就出现了滚动条。点击上层动态面板，添加交互效果，选择拖动时，目标下移→跟随垂直拖动，就可以了。滚动效果实现了，但是侧边的滚动条很影响美观，我们需要把它隐藏掉，这个时候点击上
html侧边导航栏跟随页面滚动,页面滚动时，右侧导航栏跟着对应滚动
weixin_36357157的博客
06-04 3509
页面滚动时，右侧导航栏跟着对应滚动方法一：导航栏对应跳转*{ margin:0px; padding:0px; text-align:center; color:#fff; font-size:20px;}.part1{height:544px; background:#f44336;}.part2{height:655px; background:#ff9800;}.part3{height:5...
微信小程序分页效果实现
热门推荐
阵雨的博客
12-13 1万+
index.js // pages/bianmin/bianmin.js var p = 0 var GetList = function (that) { wx.request({ url: url, method: "POST", data: { page: p }, header: { 'content-type': 'a
小程序滚动组件，左边导航栏与右边内容联动效果实现
weixin_33836223的博客
01-18 4310
效果如下： <scroll-view scroll-y="true" style='height:100%;'> <view wx:for="{{cates}}" class="nav-item {{ index === navActive ? 'active':'' }}" wx:key="{{index}}" ...
Vue仿制外卖点餐界面的左右侧菜单联动：点击左侧使右侧滚动到对应位置，右侧滚动时选中左侧对应选项
Debug的博客
05-06 2647
首先安装依赖 yarn add better-scroll yarn add stylus-loader@3.0.2 --save-dev 示例图片 <template> <div> <div class="goods"> <div class="menu-wrapper"> <ul> <li class="menu-item" v
Claude Code 从安装到调用的保姆级指南（MacOS）
m0_53581755的博客
06-18 124
本文详细介绍了在macOS上安装配置Claude Code的完整流程。主要内容包括：1）安装Node.js（推荐18+版本）；2）通过npm安装Claude Code；3）使用88api中转服务配置API连接（含获取API Key和两种配置方式）；4）VSCode插件的额外配置；5）常见问题排查方法（如连接失败的处理）。教程提供了从环境准备到实际使用的完整解决方案，特别针对国内用户无法直连的问题给出了中转服务配置方案，并附有详细的命令行操作指导和注意事项，帮助用户快速上手Claude Code。
Vue2 + flv.js 对接海康威视摄像头实现数据大屏实时视频监控（完整方案）
pony君的博客
06-18 478
本文介绍了在Vue2数据大屏中对接海康威视摄像头的完整方案，解决浏览器无法直接播放RTSP流的问题。通过对比HTTP-FLV、HLS、WebRTC等技术方案，最终采用HTTP-FLV为主+HLS为备选的策略，利用flv.js和hls.js实现低延迟视频监控。文章详细说明了整体架构设计、前端实现代码（包括分屏布局、播放器初始化等关键代码），并分享了实际项目中的技术选型经验和解决方案。该方案适用于工业MES系统、仓储管理等需要实时监控的场景，支持2x2/4x4分屏切换，已在淀粉厂MES系统中成功应用。
机场设备管理系统 - 项目完整文档
格子杰的博客
06-20 517
机场设备管理系统摘要 机场设备管理系统是一个专为机场设计的设备监控与管理平台，主要功能包括： 设备全生命周期管理：跟踪设备从入库、备机、安装使用到维修的全过程状态（使用中/备机/损坏/送修） 核心业务功能： 实时监控设备状态 故障设备快速更换（备机调配） CUSS自助值机机耗材管理 值机岛/登机口等站点配置 完整的变更历史追溯 技术架构： 采用Next.js框架构建 包含仪表盘、设备管理、站点管理等模块 使用TypeScript定义数据模型 提供CSV导入导出功能 支持PostgreSQL/MySQL数据库
MonkCode + Qwen3.7-Plus：国产AI编程的王炸组合 [1782102026834]
2408_89646393的博客
06-22 145
MonkCode + Qwen3.7-Plus是2026年中文开发者的最佳组合。免费、好用、支持国产。如果你还在为Cursor付费，试试这个组合。立即体验：https://monkeycode-ai.com/?
从爬虫业务视角对比 JavaScript 与 Python 语言特性
最新发布
Z_suger7的博客
06-22 553
结合语言特性与实战效果，可明确两门语言的爬虫业务适配边界：Python适合静态页面采集、结构化数据抓取、工程化分布式爬虫、复杂反爬场景，凭借成熟生态降低开发和维护成本，是企业常规爬虫业务的首选；JavaScript（Node.js）适合动态渲染页面抓取、高并发批量采集、前端加密参数破解、轻量实时爬虫，凭借异步非阻塞特性实现高吞吐抓取。在实际业务中，主流方案为双语言结合：使用Python搭建爬虫调度、数据存储、反爬核心架构，使用Node.js处理动态页面渲染、高并发请求场景，最大化发挥两门语言的核心优势。
于SpringBoot2+vue2智能无人仓库管理
06-19 303
智能无人仓库管理系统，旨在通过信息化手段优化仓库的补货与取货流程。系统主要面向管理员和员工两类角色，提供了从补货提醒、补货申请到取货申请的一整套闭环管理功能。 核心业务：系统以“物品”为核心，管理员可以发布补货提醒，员工看到提醒后可提交补货申请；同时，员工也可以主动发起取货申请。所有申请均需管理员审核，确保了仓库操作的规范性和可追溯性。 管理目标：通过线上流程化管理，减少沟通成本，避免库存积压或短缺，提升仓库运营效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值