如何保持点击菜单列表后显示高亮状态

最新推荐文章于 2024-05-15 11:55:14 发布
最新推荐文章于 2024-05-15 11:55:14 发布
阅读量149 收藏
点赞数
文章标签： vue javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wssg1206/article/details/132816641
版权

需求：

要求点击菜单中的对应类名后高亮。

我们需要用到的属性是default-active

因为要求点击后显示高亮，所以我们在二级菜单中添加一个点击事件来监听当前所点击的subItem.path并存储。

设置一个函数saveNavState（）

将activePath保存到sessionStroge中

同时，在data中定义一个activePath存储被激活的链接地址

把data中的activePath动态绑定到menu中的default-active中

由于在整个home一被创建的时候，我们就应该立即从sessionStorage中取到值并给他赋值到ativePath中，所以我们需要在生命周期函数create()中

wssg1206
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
列表的高亮显示
wen0627的博客
02-23 817
按照图片步骤来做 1、先做出列表的大体样式，可以做表格样的也可以做出如下的样式。 2、按照我这个做先用ul标签和li去输入变成一行一行的字。 3、在设置内联样式，设置ul标签的样式。 4、ul标签设置的是字体样式取消和鼠标移入的光标形状设置。 5、接下来设置js的样式，样式分4步，第一步获取所有li标签，第二步设置鼠标进入事件，第三步鼠标离开事件设置恢复到默认的颜色。 6、设置鼠标进入。 7、在为li设置鼠标移入颜色。 8、为li设置恢复到这个标签默.
菜单点击高亮显示
11-16 737
标准工作票统计         标准操作票统计       js：        var Url=location.href.substring(location.href.lastIndexOf("/"));                   switch(Url)             {                 case "/STWorkTick
【VUE】点击哪个按钮哪个高亮
SZnAl的博客
08-23 2942
点击某个按钮后那个就高亮显示，其他的置灰。data里设置默认第一个高亮。页面进来后默认第一个高亮显示。
vue实现点击高亮效果
最新发布
m0_57005111的博客
05-15 541
【代码】vue实现点击高亮效果。
Vue3+Element-Plus 实现点击左侧菜单列表时高亮状态保持的功能 三十
build2024
12-16 7519
1.实现的效果 2.实现高亮状态保持的原理 2.1 结合官网Menu 菜单项里面有一个属性 default-active default-active 默认激活菜单的 index。并且该属性接收的值是 string 类型 小知识 default-active 属性的作用就是说，如果点击左侧菜单列表的某一项时，需要给当前点击选中的菜单列表呈现出激活高亮的状态，那么就需要把当前点击选择的菜单项index 值赋给这个属性。由于index 类型是string, 所以我们可以...
vue+element后台管理系统 侧导航点击和刷新显示高亮的问题
sq-20184的博客
01-03 3017
最进用vue +element 写一个后台管理系统，遇到一个问题。需求是这样的，要求侧导航点击后跳转到路由，每点击的一项都要保持高亮状态，侧导航栏中，只能保证一个展开的窗口，还有就是刷新后，也要保证所对应路由的那个侧导航显示高亮。` <template> <div class="tab"> <el-row class="tac&amp
vue iview的菜单组件Mune 点击不高亮的解决方案
10-16
在Vue.js应用中，特别是在使用iView UI框架开发时，我们可能会遇到菜单组件Menu在点击后不显示高亮效果的问题。这个问题通常是由于Vue Router的配置或组件自身的样式冲突导致的。下面将详细介绍如何解决这个问题。 ...
Jquery如何实现点击时高亮显示代码
12-09
4. 当用户点击具有"menu" class的元素时，该元素会被高亮，同时其他"menu"元素的高亮状态被移除。 通过这种方法，你可以轻松地为网页添加互动性，提高用户体验。同时，jQuery提供的简便API使得这种交互实现起来既...
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
11-25
在本文中，我们将探讨如何使用jQuery来实现一个菜单效果，该效果使得用户点击后菜单项会高亮并保持背景固定显示。这个功能是网站交互设计中常见的，它能提升用户体验，帮助用户清晰地识别当前所在页面或已选择的选项...
Layui 导航默认展开和菜单栏选中高亮设置的方法
10-16
在上述代码中，当用户点击某个子菜单项时，对应的 `dd` 元素会被添加 `layui-this` 类，使其背景色改变，呈现出被选中的状态。 - 当页面加载时，需要确保当前激活的菜单已经带有 `layui-this` 类。这可以通过在后端...
js 全兼容可高亮二级缓冲折叠菜单
12-08
菜单中的当前选中项（一级和二级）应具有高亮状态，以便用户清楚地看到当前所在的位置。这可以通过CSS类`cur`实现，当鼠标悬停或点击时，相应链接的背景位置发生变化，达到高亮效果。 **折叠层缓冲动画** 当展开或...
基于jquery 实现导航条高亮显示的两种方法
忧郁的蛋的专栏
11-26 1287
既然url不一样,那就找导航-->分类-->新闻之间的关系了.他们的对应关系是一个导航下可能有多个分类,一个分类下可能有多篇新闻.那么逆向的来说,每一篇新闻或者分类都对应一个导航.那么在对应的的分类页面和新闻页面都定义一个变量就是导航标识.然后修改导航的标签的rel属性.该属性与该变量对比,如果一样就改当前的class.点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的.所以我的思路是这样的。
Vue el-menu高亮设置及点击菜单项实现路由跳转
热门推荐
爱哭的毛毛虫的博客
11-13 1万+
el-menu相关知识记录一、el-menu菜单项高亮设置二、点击菜单项实现路由跳转 2021/11/13 知识点记录 一、el-menu菜单项高亮设置 el-menu高亮是通过:default-active来设置的，一般我们都是绑定$ route.path或者$route.name这两个值，因为他们基本上都是唯一的，对于高亮的判断这是通过将:default-active绑定的值与菜单项的唯一标识index比较来显示是否高亮，如果相同则高亮。 $ route.path对应当前页面路由的路径。 $ route
点击菜单项打开新的组件页面，并高亮显示菜单项
weixin_44269412的博客
05-06 352
点击用户列表打开新的组件页面 1.在components添加user文件夹下新建Users.vue组件 2.在页面右侧主题区域展示User组件 （1）在router.js中导入组件 import User from './components/user/Users.vue' （2）在home路由中新增一个子路由 const router = new Router({ routes: [ { path: '/', redirect: '/login' }, { pa
实现菜单栏点击持久高亮
Up was the only direction your compass navigate.
04-04 1493
需求   在做项目的时候，使用的是左侧菜单栏，右侧显示界面的样式。封装好的JS文件和现有文件冲突，所以需要重新写一个点击菜单上的按钮，按钮固定显示高亮、定位。 实现   view层代码(写在代码片里格式全乱了，所以用截图了)         CSS样式    .nav li.active > a { color: #FFFFFF; opacity: 1; ...
js实现导航菜单点击切换选中时高亮状态
Poo__Chai的博客
09-21 3832
<div id="headBoxFontHome" class="active">首页</div> <div id="headBoxFontQue
js实现导航菜单点击切换选中时高亮状态——方法二
苏公子的博客
09-02 9387
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit
css 如何设置鼠标点击后显示高亮
05-25
可以使用 CSS 的 `:active` 伪类来设置鼠标点击后显示高亮，示例代码如下： ```css a:active { background-color: yellow; } ``` 上面的代码会在鼠标点击链接时，将链接的背景色设置为黄色。你也可以根据需要将上面的样式修改为其他样式，比如设置文字高亮等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值