根据location地址，在导航栏高亮显示当前页面

获取当前页面的地址栏。与导航栏中所有<a> 标签的href属性进行比较。如果相等则高亮显示此<a>标签。

注意点：a 标签的href 属性在浏览器解析时是绝对路径。

　　　　a 标签的href 如果是锚点，则 pathname ， href都与 location的 pathname ，href相等，但hash 属性会存储锚点，所以还需判断是否是锚点。

代码：

 1 <script src="../static/assets/vendors/jquery/jquery.js"></script>
 2 <script>
 3   $(function(){
 4     $(".aside a").each(function(index,value){ //each（）是jQ对象中的方法，只能用来遍历jQ对象 与foreach 中的形参相反。第一个形参是索引，第二个是dom对象
 5        if(value.pathname == location.pathname && value.hash == location.hash){
 6          $(value).parent().addClass("active"); //高亮的样式
 7          $(value).parent().parent().addClass("in"); //展开列表
 8          $(value).parent().parent().prev().removeClass("collapsed"); //改变箭头指向
 9        }else if(location.pathname == "/admin/" && index == 0){ //如果是首页（index）
10          $(value).parent().addClass("active"); //高亮显示
11        }
12     })
13   });
14
15 </script>

转载于:https://www.cnblogs.com/csdcs/p/10170675.html

根据location地址，在导航栏高亮显示当前页面相关推荐

Vue + Spring Boot 项目实战（八）：导航栏与图书页面设计
文章目录前言一.导航栏的实现 1.路由配置 2.使用 NavMenu 组件二.图书管理页面 2.1. LibraryIndex.vue 2.SideMenu.vue 3.Books.vue 前言 ...
Vue + Spring Boot 项目实战（七）：导航栏与图书页面设计
本篇目录前言一.导航栏的实现 1.路由配置 2.使用 NavMenu 组件二.图书管理页面 1.LibraryIndex.vue 2.SideMenu.vue 3.Books.vue 前言之前 ...
【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )
文章目录一.BottomNavigationBar 底部导航栏二.PageView 滑动页面三.BottomNavigationBar 与 PageView 关联四.完整代码示例 1.核心导航 ...
vue中点击导航栏部分，页面切换
写页面的时候都会用到一些导航栏.点击不同的部分切换不同的页面.并且点击的时候更换颜色代码自己简单的写一下:(vue) <nav> <ul><li v-for=" ...
Ajax实现点击导航栏只切换页面内容，导航栏不变
<ul class="Menu"> <li class="current" data-id="111">导航1< ...
html页面缩小导航栏隐藏,HTML页面中如何隐藏导航栏
满意答案 stmgwzmf 推荐于 2016.05.04 采纳率:56% 等级:11 已帮助:4248人可以用JS实现 function showsubmenu(sid){ whichEl = ...
微信小程序——不同角色的导航栏显示不同
文章目录问题描述解决方法代码实现底部导航栏排查员存在的问题问题描述微信小程序的原生底部导航栏限制了数量(3-5个)且不能根据你的不用用户进行动态的底部导航栏变化,无法适应多种用户从 ...
手把手教你用 elementUI 实现导航栏
elementUI导航栏官网 1. 安装 elementUI 2. 文件准备 3. 配置路由 4. 导航栏代码一.安装 elementUI npm i element-ui -S: 在 main.j ...
转载：Android底部导航栏，三种风格和实现
原文出处标题:Android底部导航栏,三种风格和实现作者:阿飞__ 原文链接:Android底部导航栏,三种风格和实现_阿飞__的博客-CSDN博客_android导航栏一.效果图展示如果动 ...

根据location地址，在导航栏高亮显示当前页面

根据location地址，在导航栏高亮显示当前页面相关推荐

最新文章

热门文章