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

最新推荐文章于 2024-02-28 13:39:10 发布
最新推荐文章于 2024-02-28 13:39:10 发布
阅读量2.8k 收藏 3
点赞数
分类专栏： web前端小知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sakura_Momoko/article/details/52860485
版权
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=
    11.
最低0.47元/天 解锁文章
想流浪的姑娘
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
高亮导航js代码
01-10
1. <script> 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"; } }(); </script> 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"; } }();
导航高亮
zhizhuo0915的博客
01-08 361
HTML 代码    首页    关于我们    新闻资讯 JQUERY 代码 导航高亮 JQ（一）   script type="text/javascript">           var myNav=document.getElementById("main-nav").getElementsByTagName("a");         var cur
前端导航高亮
Irene1991的博客
12-31 544
效果如下： a 标签会先执行绑定的事件，后执行 href 跳转页面（页面刷新）。 导航点击高亮（页面跳转）事件，前端根据一级导航点击时的数字码来确认高亮对象。 页面跳转前执行的绑定事件，缓存数字码，跳转后自动刷新页面，获取缓存中的数字码。 废话不多说，直接上代码。 主要结构： <div class="navbar" :class="'bg_opacity_'+o...
VUE路由高亮或导航高亮（有图有真相,学无止境，欢迎交流）
Web前端工程师
05-09 245
navFlash.vue: <template> <div> <router-link to="navFlash" exact> <div> 导航1 </div> </router-link> <router-link to="navFlash2" exact> <div> 导航2 </div>
vue-router二级导航切换路由及高亮显示的实现方法
10-16
本篇文章将深入探讨如何在Vue Router中实现二级导航的切换路由以及高亮显示。 首先，我们要创建两个主要的导航页面，比如“发现”和“我的音乐”。在Vue中，我们可以创建两个单独的组件，如`Discover.vue`和`...
懒人仿当前京东商城左侧二级导航
06-05
"懒人仿当前京东商城左侧二级导航"是一个项目，旨在复制京东商城的左侧二级导航栏的样式和功能，以便其他开发者可以轻松地在自己的电商平台上实现类似的设计。这个压缩包文件包含了实现这一功能所需的代码和资源。 ...
jQuery动画二级下拉导航菜单
04-07
一个基本的二级导航菜单通常由一级菜单项和隐藏的二级菜单项组成。一级菜单项通常显示在顶部，而二级菜单项则在鼠标悬停时通过下拉方式显示。例如： ```html 一级菜单1 <li><a href="#">二级菜单1-1</a></...
Layui 导航默认展开和菜单栏选中高亮设置的方法
10-16
员先锋</span></a> </dd> </dl> </li> </c:if> </ul> 在Layui中，实现导航默认展开和菜单栏选中高亮的功能，主要是通过CSS样式和JavaScript事件来完成。下面将详细解释如何设置。 1. **导航默认展开** - 在HTML...
CSS特效（五）：导航高亮的设置
qwerty053的博客
10-06 2280
今天满课的孩子，偷个懒，做个超级简单的导航高亮，效果如下： 这个特效让我学到了一个新知识，就是nth-child()，一个超棒的解释如下： (38条消息) CSS3 :nth-child(n)使用注意_IT技术宅-北方的刀郎-CSDN博客 所以这个特效中最主要的就是理解nth-child()，然后为其设置hover之后某一元素的变化，即如下代码：li:nth-child(1):hover ~ #nav，学到了！ 代码如下： <!DOCTYPE html> <html lang="en"&
2019最新漂亮的二次导航个人单页.zip
06-28
2019最新漂亮的二次导航个人单页，自己也在用，可以当做404页面使用，也可以当首页使用，绝对不亏，特别好看的
3D樱花.html
09-24
html特效绝美的3D樱花特效 本地预览请用火狐浏览器 纯函数计算值得参考
网站页面刷新后,导航菜单高亮显示的位置不对问题
最新发布
wasd2399的博客
02-28 381
解决公共页面路由跳转刷新高亮丢失问题
高亮显示当前导航条的javascript
Tz。
05-25 3410
首先写一下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 313
点击“文萃”，首页的样式current去掉，“文萃”的样式加current，即比如：点击“首页”，在样式 添加成 ；打算在顶部导航栏高亮显示所点击内容，点击后，高亮内容保留，不消失，但用了js想在class添加样式current,但失败了。
你需要的导航网站，这里都有
JavaEdge全是干货的技术号
10-12 2万+
6、舆情/新媒体导航（新闻传播自媒体资源导航）http://hao.gsdata.cn/2、Seeseed（设计素材资源导航）https://www.seeseed.com/10、知筑导航（建筑土木设计资源导航）http://www.archi123.com/3、电子发烧友（电子专业/行业门户）http://www.elecfans.com/4、HiPPTer（PPT资源导航）http://www.hippter.com/2、学吧导航（自学资源导航）https://www.xue8nav.com/
想要导航首页提示页_怎么做百度优化才会上首页
热门推荐
weixin_39647458的博客
11-22 12万+
今天我们来讲一下对于想做SEO优化的朋友，却常常苦恼无从下手，今日为你回答怎么做百度优化才会上首页 1、主页的布局 现在许多网站的通病几乎都是主页的内容较多，一进入便呈现出慢页面的内容，显得臃肿不胜，这不只时加载速度变慢，也使阅览者很难快速找到需求的信息，因此导致用户领会较差。 一个网站的主页是网站的进口，决议了阅览者最首要的影响和对网站的喜爱首要判别条件，所以，不管哪方面的网站，主页要尽量简介，...
想要导航首页提示页_网站首页如何聚焦关键词
weixin_39828331的博客
11-27 1万+
在搜索引擎优化过程中，关键字的选择和设置是网站获得排名的第一步。搜索引擎是如何确定网站主页关键词的呢？从以下几个方面来增加关键词的密度，有助于搜索引擎确定网站的关键词。图片源自网络一、网站首页关键词在这5个位置聚焦关键词①三大标签：标题标签、关键词标签、描述标签。②图片ALT标签、主导航或者重要的的位置出现需要优化的关键词。③网站首页各个板块的标题，出现当前页面的关键词。④首页设置一个文字区块。文...
网站建设|网站首页这么设计，用户体验更好
jiangfendou的博客
10-28 1440
这是【建站百科】专栏第18篇原创内容，由我在建站行业从业10年、给上万公司搭建过网站的经验总结而来。 hello，艾瑞巴蒂，大梦又来了，今天要说的是作为网站“门面”的网站首页设计。 一、网站首页的重要性 作为网站全貌及重要信息、产品的展示页，以及流量的入口页，企业网站首页的设计好坏一般决定了用户对网站的第一印象。 人机交互学博士Jakob Nielsen说过：“见到什么比记得什么更容易”。 其实，无论是人还是系统工具，都看颜值。漂亮的排版布局、精致的首页可以让人眼前一亮，可以提升网站的设计感；粗糙的排版、简
nuxt2导航点击高亮，点击二级导航一级导航依然高亮实现列子
06-02
对于一级导航，我们使用 `$route.path === '/'` 判断当前路由是否是首页，对于二级导航，我们使用 `$route.path.startsWith('/about')` 判断当前路由是否以 `/about` 开头。同时，我们还定义了 `active` 和 `exact-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值