二级导航页面+当前页面导航高亮显示

最新推荐文章于 2024-07-17 16:36:32 发布
最新推荐文章于 2024-07-17 16:36:32 发布
阅读量2.9k 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： web前端小知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Sakura_Momoko/article/details/52860485
本文介绍如何在网站中创建二级导航菜单，并实现当用户浏览不同页面时，对应的导航链接高亮显示。通过JavaScript和CSS，我们可以动态地突出显示当前页面所在的导航项，提升用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

html部分页面代码： 
  
  
    
   
   
  1. <div class="webnav">
    2. 
   
   
  2.         <ul class="nav_list">
    3. 
   
   
  3.         	<li>
    4. 
   
   
  4.         		<a href="CDKQWeb/PublicWeb/PublicWeb/Index.w.xhtml">首页</a>
    5. 
   
   
  5.         	</li>
    6. 
   
   
  6.         	<li>
    7. 
   
   
  7.         		<a href="CDKQWeb/PublicWeb/PublicWeb/ScienceEnterpriseIntro.w.xhtml">科技服务</a>
    8. 
   
   
  8.         		<div class="down">
    9. 
   
   
  9. 	            	<a href="CDKQWeb/PublicWeb/PublicWeb/ScienceEnterpriseIntro.w.xhtml">企业介绍</a>
    10. 
   
   
  10. 	                <a href="CDKQWe
    11.
最低0.47元/天 解锁文章

200万优质内容无限畅学
第三十四章 Vue路由进阶之声明式导航（导航高亮）
Calvin的博客
11-04 958
在Vue中通过VueRouter插件，我们可以非常简单的实现实现导航高亮效果VueRouter 提供了一个全局组件 router-link (取代 a 标签) ① 能跳转，配置 to 属性指定路径(必须) 。，但是to标签中填写的路径无需 # a标签的写法：router-link写法：② 能高亮，默认就会提供高亮类名，可以直接设置高亮样式我们通过开发者工具可以看到，router-link的本质还是 a 标签 二、声明式导航的两个类名 2.1. 声明式导航类名匹配方式 我们发现 router-link
导航高亮
zhizhuo0915的博客
01-08 427
HTML 代码    首页    关于我们    新闻资讯 JQUERY 代码 导航高亮 JQ（一）   script type="text/javascript">           var myNav=document.getElementById("main-nav").getElementsByTagName("a");         var cur
前端导航高亮
Irene1991的博客
12-31 620
效果如下： a 标签会先执行绑定的事件，后执行 href 跳转页面（页面刷新）。 导航点击高亮（页面跳转）事件，前端根据一级导航点击时的数字码来确认高亮对象。 页面跳转前执行的绑定事件，缓存数字码，跳转后自动刷新页面，获取缓存中的数字码。 废话不多说，直接上代码。 主要结构： <div class="navbar" :class="'bg_opacity_'+o...
高亮导航js代码
01-10
1. void function(){ var objs = $('.nav-menu li'); var currentPage = document.location.href.toString(); currentPage = currentPage.substr(currentPage.lastIndexOf("/") + 1, currentPage.length); if (currentPage.length < 1) { objs[0].className = "active"; return; } for (var i = 0; i < objs.length; i++) { var page = objs[i].href; page = page.substr(page.lastIndexOf("/") + 1, page.length); if (page == currentPage) objs[i].className = "active"; } }(); 2、/*高亮导航*/ var menuu = $('menu'); var subMenu = menuu.getElements('li'); var currentPage = document.location.href.toString(); var currentPage = currentPage.substr(currentPage.lastIndexOf("/") + 1, currentPage.length); subMenu.each(function(el){ var menua = el.getElement('a'); var page = menua.get('href'); page = page.substr(page.lastIndexOf("/") + 1, page.length); if (page == currentPage){ menua.addClass('select'); } }); 3. void function(){ var objs = $$('.nav-menu li'); var currentPage = document.location.href.toString(); currentPage = currentPage.substr(currentPage.lastIndexOf("/") + 1, currentPage.length); if (currentPage.length < 1) { objs[0].className = "active"; return; } for (var i = 0; i < objs.length; i++) { var page = objs[i].getElement('a').href; page = page.substr(page.lastIndexOf("/") + 1, page.length); if (page == currentPage) objs[i].className = "active"; } }();
vue-router二级导航切换路由及高亮显示的实现方法
10-16
本篇文章将深入探讨如何在Vue Router中实现二级导航的切换路由以及高亮显示。 首先，我们要创建两个主要的导航页面，比如“发现”和“我的音乐”。在Vue中，我们可以创建两个单独的组件，如`Discover.vue`和`...
vue+element导航栏高亮显示的解决方式
10-16
在使用Element UI的组件时，常常会遇到导航项在页面跳转或刷新后无法正确显示高亮状态的问题。本文将详细介绍如何解决Vue结合Element UI时导航栏高亮显示的问题。 首先，我们要了解Element UI的组件是如何根据路由...
懒人仿当前京东商城左侧二级导航
06-05
"懒人仿当前京东商城左侧二级导航"是一个项目，旨在复制京东商城的左侧二级导航栏的样式和功能，以便其他开发者可以轻松地在自己的电商平台上实现类似的设计。这个压缩包文件包含了实现这一功能所需的代码和资源。 ...
VUE路由高亮或导航高亮（有图有真相,学无止境，欢迎交流）
Web前端工程师
05-09 301
navFlash.vue: <template> <div> <router-link to="navFlash" exact> <div> 导航1 </div> </router-link> <router-link to="navFlash2" exact> <div> 导航2 </div>
web前端 | 导航菜单高亮实现 | 事件委托、事件监听
最新发布
yavlgloss的博客
07-17 536
前端常见的一个导航栏效果
2019最新漂亮的二次导航个人单页.zip
06-28
2019最新漂亮的二次导航个人单页，自己也在用，可以当做404页面使用，也可以当首页使用，绝对不亏，特别好看的
3D樱花.html
09-24
html特效绝美的3D樱花特效 本地预览请用火狐浏览器 纯函数计算值得参考
纯CSS二级导航菜单
12-21
此源码内容为纯css打造绿色横向二级导航菜单代码，去IE6的BUG
CSS特效（五）：导航高亮的设置
qwerty053的博客
10-06 2491
今天满课的孩子，偷个懒，做个超级简单的导航高亮，效果如下： 这个特效让我学到了一个新知识，就是nth-child()，一个超棒的解释如下： (38条消息) CSS3 :nth-child(n)使用注意_IT技术宅-北方的刀郎-优快云博客 所以这个特效中最主要的就是理解nth-child()，然后为其设置hover之后某一元素的变化，即如下代码：li:nth-child(1):hover ~ #nav，学到了！ 代码如下： <!DOCTYPE html> <html lang="en"&
网站页面刷新后,导航菜单高亮显示的位置不对问题
wasd2399的博客
02-28 590
解决公共页面路由跳转刷新高亮丢失问题
高亮显示当前导航条的javascript
Tz。
05-25 3474
首先写一下html结构:<div id="nav"> <ul> <li><a href="#1">首页</a></li> <li><a href="#2">产品</a></li> <li><a href="#3">地址</a></li> <li><a href="#4">关于</a></li> <li><a hr
怎样实现顶部导航栏高亮显示（class添加样式失败）
ok5266的博客
02-08 377
点击“文萃”，首页的样式current去掉，“文萃”的样式加current，即比如：点击“首页”，在样式 添加成 ；打算在顶部导航栏高亮显示所点击内容，点击后，高亮内容保留，不消失，但用了js想在class添加样式current,但失败了。
想要导航首页提示页_网站首页如何聚焦关键词
weixin_39828331的博客
11-27 1万+
在搜索引擎优化过程中，关键字的选择和设置是网站获得排名的第一步。搜索引擎是如何确定网站主页关键词的呢？从以下几个方面来增加关键词的密度，有助于搜索引擎确定网站的关键词。图片源自网络一、网站首页关键词在这5个位置聚焦关键词①三大标签：标题标签、关键词标签、描述标签。②图片ALT标签、主导航或者重要的的位置出现需要优化的关键词。③网站首页各个板块的标题，出现当前页面的关键词。④首页设置一个文字区块。文...
想要导航首页提示页_从首页到详情页，教你如何装修淘宝店铺
热门推荐
weixin_39785669的博客
11-04 1万+
一个好的店铺装修，是可以更好的挽留买家，刺激消费，提升转化的。从店铺首页到详情页，每一个模块的装修对店铺来说都是非常重要的，千万不能懈怠。如果你还不清楚要怎么做的话，下面就教你该怎么装修！【店铺首页装修】1）淘宝店招PC端装修店招装修：首先淘宝卖家需要登录后台，然后点击“店铺装修”PC端的首页将左侧店铺招牌模块拖动到右侧模块中；然后再回到“页面编辑”，将鼠标移到店铺招牌模块上会出现“编辑”按钮；进...
实现二级菜单高亮的jQuery下拉导航效果
高亮显示是Web设计中一个常用的交互效果，用以指示当前页面位置、聚焦状态或是用户鼠标悬停的区域。在导航栏中实现高亮效果，可以增强用户体验，让访问者更容易知道他们当前所处的位置。 ### 鼠标悬停效果 鼠标悬停...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值