导航遍历并激活当前样式的方法

最新推荐文章于 2021-07-28 22:21:30 发布
最新推荐文章于 2021-07-28 22:21:30 发布
阅读量120 收藏 1
点赞数
分类专栏： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdgogo/article/details/108182374
版权
这篇博客介绍了激活当前路由样式的五种方法：通过props属性传参判断，获取当前路由，以及在App.vue的style、总路由js文件中设置linkActiveClass来实现导航遍历中的高亮显示。
摘要由CSDN通过智能技术生成

在这里插入图片描述

路由配置：

在这里插入图片描述

方法一：通过props属性传参，判断当前路由是否跟props参数相同。

导航公共组件Header.vue
在这里插入图片描述
在这里插入图片描述
首页（父组件）：
在这里插入图片描述
列表页（父组件）：
![在这里插入图片描述](https://img-blog.csdnimg.cn/202008231415
。。。（以此类推）

方法二࿱

最低0.47元/天 解锁文章
cdgogo
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
＜router-link＞属性详解
得意小门生的博客
08-07 2万+
<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的 <a> 标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名 <router-link>组件的属性有： to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class to（必选参数）：类型string.
遍历导航控制器
FIGHTING的专栏
01-28 1554
项目当中有时候会用到判断 当前控制器是哪个控制器跳转过来的 因此我们需要找到一个方法拿到 上一个导航控制器 我们可以通过遍历的方式来获取导航控制器中 控制器的元素 下面提供了两种方式遍历 for-in enumerateObjectsUsingBlock - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(
JS练习之导航菜单点击激活，js原生写法
大龄python业余爱好者锅大虾
08-01 750
点击菜单激活，为当前点击的目标追加样式，比如背景颜色或字体颜色，这种操作称之为“排他思想”，其实现的逻辑为： 1、先把菜单的样式复原，使用for循环处理 2、为当前的元素增加样式，使用for循环处理 以下是实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
导航页jsp 遍历菜单代码
刘罗好帅的爸爸
03-30 1783
<% String path = request.getContextPath(); String basepath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %>
java freemarker遍历树形菜单(导航栏菜单)
zxm的博客
12-13 3349
最近在写框架，到了模板对树形的处理，从后台到前端有必要把整个过程记录下来 freemarker是一套模板引擎，主要用于数据的展示，你能看到这篇文章相信你对freemarker有所了解。 首先看我们的菜单(树形)数据结构 代码生成： import java.io.Serializable; import java.util.ArrayList; import java.util.Li
vue项目 使用Element-UI的NavMenu 遍历路由表生成导航菜单与点击页面路由时导航菜单失去高亮显示效果
幽冥雪羽的博客
11-04 5308
介绍：目前使用的路由表是三级路由表，文章中使用Element-UI动态生成导航栏可以有N级路由嵌套，但是事实上不会有那么多级路由，但是为了方便还是一次性写好，使用时就是复制文件就好 虚拟路由表: const RouterMap =[ { path: '/login', component: () => import('@/views/login'), hidden: true }, { ...
javascript实现当前页导航激活的方法
10-24
接下来，我们使用JavaScript（这里使用的是jQuery库）来检测当前页面的URL，并将对应的导航项设置为激活状态。代码如下： ```javascript $(function() { var a1 = document.URL; // 获取当前页面URL var a2 = $(...
JavaScript导航脚本判断当前导航
10-21
通过JavaScript脚本，我们可以根据浏览器当前的URL地址来判断用户所在的页面，并通过脚本来更新页面上的导航元素，使其反映当前激活的状态。 从给定的文件内容来看，该JavaScript脚本主要应用了jQuery库来简化DOM...
js实现显示当前状态的导航效果代码
10-23
在本文中，我们深入探讨了如何使用JavaScript（js）来实现一个具有交互性的导航栏，该导航栏能够根据用户的点击行为来动态地显示当前激活的导航项状态。这一功能对于构建一个直观、易于用户操作的网站导航体验至关...
jQuery实现导航栏头部菜单项点击后变换颜色的方法
10-19
如示例中`#menu li a`定义了基本链接样式，`#menu li.active`和`#menu li none`则分别定义了激活和非激活状态下的菜单项样式。通过这种方法，可以实现点击导航栏菜单项后颜色变换的交互效果。 总结来说，jQuery在...
Vue日常笔记之路由router默认主页激活样式Active一直存在
qq_44419884的博客
02-15 3023
制作导航栏时，添加路由激活样式后，在切换页面路由时，默认首页激活样式一直存在； 如图： 在别的页面首页也会有激活样式。 解决办法：在首页的标签 &lt;router-link to="/"&gt; 在这里插入代码片中添加exact; 添加后为 \&lt;router-link to="/" exact&gt; ；效果图为： &lt;router-link&gt;标签在页面中会被解析成一个&lt...
vue的生命周期（详细）
热门推荐
得意小门生的博客
09-04 2万+
生命周期图： 可以理解vue生命周期就是指vue实例从创建到销毁的过程，在vue中分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。 一、创建（实例） 1、beforeCreate：这个阶段实例已经初始化，只是数据观察与事件机制尚未形成，不能获取DOM节点（没有data，没有el） 使用场景：因为此时data和methods都拿不到，所以通常在实例以外使用 2、created：实例已经创建，仍然不能获取DOM节点（有data，没有el） 使用场景：模板渲染成html前调用，此时可以获取data
vue中使用swiper插件（版本3）
得意小门生的博客
09-09 5197
安装指定版本 npm install vue-awesome-swiper@3 --save-dev 组件中使用 <template> <div class="home"> <!-- <h1>首页</h1> --> <navBar class="navBar"> <span slot="center">购物街</span> </navBar> <
vue-router 路由的懒加载原理及方式
得意小门生的博客
08-07 4112
参考：https://www.cnblogs.com/hutuzhu/p/10407258.html
＜router-link＞动态路由传参并接收参数
得意小门生的博客
08-07 2740
注意： 在子组件中 获取参数的时候是$route.params而不是 $router 这很重要~~~ 通过@click方法传参跳转 参考：https://www.cnblogs.com/qiu2841/p/11018190.html
文件路径的引用问题（配置文件路径vue.config.js）
得意小门生的博客
08-09 2390
在项目根目录下创建vue.config.js文件 const path = require('path');//引入path模块 function resolve(dir){ return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径 } module.exports={ chainWebpack:(config)=>{ config.resolve.alias //set第一个参数
【uni-app】发送验证码60s倒计时
得意小门生的博客
07-23 2139
<view class="item flex align-items-center"> <view class="title">新手机号</view> <view class="newPhone"><input type="text" value="" v-model="newPhone" /></view> <view v-if="showText == true" class="sendCodeBtn" @click..
【vue】根据不同的状态渲染不同的值和class
得意小门生的博客
07-28 1934
效果图： <view class="list"> <view class="item flex justify-between align-items-center" v-for="(item, index) in list" :key="index"> <view class="name">{{ item.name }}</view> <view class="time">{{ item.time }}</view>
使用jQuery+css模仿百度百科导航
这段代码会在滚动时遍历每个章节标题，当标题进入视口时，给相应的导航项添加激活样式（如 `.active`），以高亮显示当前查看的部分。 此外，可能还需要添加一些动画效果，比如平滑滚动到目标位置，这可以通过`$('...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值