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

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

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

代码:

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

根据location地址,在导航栏高亮显示当前页面的更多相关文章

  1. elementUI的导航栏在刷新页面的时候选中状态消失的解决

    首先elementUI的导航栏中的选中项的高亮显示时的字体颜色可以在属性中设置,但是高亮时的背景颜色不能设置,所以要自己修改高亮的背景颜色 .el-menu-item.is-active { back ...

  2. 聊天界面使用IQKeyboardManager导航栏及整个页面上移的解决方法

    问题: 使用第三方库IQKeyboardManager时会使整个页面上移,导航栏页偏移出了显示范围.在聊天界面就会使得上面的消息看不到. 解决方法: 首先说明:在聊天界面使用IQKeyboardMan ...

  3. jquery 使用a标签导航栏跳转页面,动态添加高亮

    众所周知,使用a标签跳转之后,会刷新一次,继而这个添加的样式就会消失.那么怎么解决这一问题呢? <script> $(function () { $('.bar a').each(func ...

  4. iview修改tabbar实现小程序自定义中间圆形导航栏及多页面登录功能

    emmm,用iview改了个自定义中间圆形的tabbar. 如下图所示, 重点,什么鬼是“多页面登录”? 例如:我现在要做一个功能,要说自己长得帅才能进去页面. 一个两个页面还好,但是我现在要每个页面 ...

  5. Flutter踩坑日记:Tab导航栏保持子页面状态

    最近应邀票圈小伙伴躺坑Flutter,项目初步雏形完结.以原来的工具链版本为基础做了Flutter版本,不过后面还是需要优化下项目接入Redux,以及扩展一些Native方法. 这里记录一下在开发过程 ...

  6. Ecshop导航栏标题栏的伪静态设置

    当Ecshop的伪静设置成功之后,左侧的分类标签,包括具体的产品页面都可以顺利的打开伪静态页面,但是点击导航栏,或者标题栏的时候,却还是之前的数据库标签页的方式,这是怎么一回事呢? 这是由于,Ecsh ...

  7. 微信小程序 自定义头部导航栏和导航栏背景图片 navigationStyle

    ​ 这两天因为要做一个带背景的小程序头,哭了,小程序导航栏有背景也就算了,还得让导航栏上的背景顺下来,心态小崩.现在可以单独设置一个页面的小程序头了,但是前提是要微信7.0以上的版本,考虑到兼容性问题 ...

  8. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  9. Bootstrap<基础十七>导航栏

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

随机推荐

  1. HSQL结合润乾报表同步部署问题

     1 . 问题概述 中国登记结算公司为了验证报表模型和附带的样例[内建的不算],都是需要连接携带的DEMO数据源才能够运行, 应用程序[润乾报表]需要部署到UNIX服务器上, DEMO自带的HSQ ...

  2. Listview点击已读使用getBadgeView标示

    重:每个ListItem是属于ListItem自己的,不能够放到ViewHolder中,而是数据源每项的. @Override public View getView(int position, Vi ...

  3. apache2.2+php5.3+mysql5.5+Zend Guard Loader集成包

    由前一篇文章 http://www.cnblogs.com/darktime/p/3407980.html 我就配置了一个环境包,免安装的,只需要运行一个.bat的文件文件就算安装成功了 如果你需要用 ...

  4. 在 Azure 中的 Linux 虚拟机上使用 SSL 证书保护 Web 服务器

    若要保护 Web 服务器,可以使用安全套接字层 (SSL) 证书来加密 Web 流量. 这些 SSL 证书可存储在 Azure Key Vault 中,并可安全部署到 Azure 中的 Linux 虚 ...

  5. java笔记--线程休眠sleep()的运用

    线程休眠sleep()方法的运用 在多线程编程中,有时需要让某个线程优先执行.除了可以设置这个线程的优先级为最高外,更加理想的方法是休眠其他线程,若有线程中断了正在休眠的线程,则抛出Interrupt ...

  6. 几个很好用SQL语法(SqlServer)

    1,MERGE INTO 语句: 这个语法仅需要一次全表扫描就完成了全部工作,执行效率要高于INSERT+UPDATE,作用还是很强大的(简单的说就是它可以批量更新和插入处理一个数据集,如果存在就更新 ...

  7. 设计带有placeHolder的TextView

    设计带有placeHolder的TextView 效果: 源码: PlaceholderTextView.h 与 PlaceholderTextView.m // // PlaceholderText ...

  8. UNIX高级环境编程(8)进程环境(Process Environment)- 进程的启动和退出、内存布局、环境变量列表

    在学习进程控制相关知识之前,我们需要了解一个单进程的运行环境. 本章我们将了解一下的内容: 程序运行时,main函数是如何被调用的: 命令行参数是如何被传入到程序中的: 一个典型的内存布局是怎样的: ...

  9. DA-GAN技术【简介】【机器通过文字描述创造图像】

    [题外话:今天上课我做了一个关于DA-GAN技术的ppt演讲,写一点东西留念一下...] 转载请注明出处:https://www.cnblogs.com/GraceSkyer/p/9107471.ht ...

  10. 【cs231n】图像分类 k-Nearest Neighbor Classifier(K最近邻分类器)【python3实现】

    [学习自CS231n课程] 转载请注明出处:http://www.cnblogs.com/GraceSkyer/p/8763616.html k-Nearest Neighbor(KNN)分类器 与其 ...