根据location地址,在导航栏高亮显示当前页面
获取当前页面的地址栏。与导航栏中所有<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地址,在导航栏高亮显示当前页面的更多相关文章
- elementUI的导航栏在刷新页面的时候选中状态消失的解决
首先elementUI的导航栏中的选中项的高亮显示时的字体颜色可以在属性中设置,但是高亮时的背景颜色不能设置,所以要自己修改高亮的背景颜色 .el-menu-item.is-active { back ...
- 聊天界面使用IQKeyboardManager导航栏及整个页面上移的解决方法
问题: 使用第三方库IQKeyboardManager时会使整个页面上移,导航栏页偏移出了显示范围.在聊天界面就会使得上面的消息看不到. 解决方法: 首先说明:在聊天界面使用IQKeyboardMan ...
- jquery 使用a标签导航栏跳转页面,动态添加高亮
众所周知,使用a标签跳转之后,会刷新一次,继而这个添加的样式就会消失.那么怎么解决这一问题呢? <script> $(function () { $('.bar a').each(func ...
- iview修改tabbar实现小程序自定义中间圆形导航栏及多页面登录功能
emmm,用iview改了个自定义中间圆形的tabbar. 如下图所示, 重点,什么鬼是“多页面登录”? 例如:我现在要做一个功能,要说自己长得帅才能进去页面. 一个两个页面还好,但是我现在要每个页面 ...
- Flutter踩坑日记:Tab导航栏保持子页面状态
最近应邀票圈小伙伴躺坑Flutter,项目初步雏形完结.以原来的工具链版本为基础做了Flutter版本,不过后面还是需要优化下项目接入Redux,以及扩展一些Native方法. 这里记录一下在开发过程 ...
- Ecshop导航栏标题栏的伪静态设置
当Ecshop的伪静设置成功之后,左侧的分类标签,包括具体的产品页面都可以顺利的打开伪静态页面,但是点击导航栏,或者标题栏的时候,却还是之前的数据库标签页的方式,这是怎么一回事呢? 这是由于,Ecsh ...
- 微信小程序 自定义头部导航栏和导航栏背景图片 navigationStyle
这两天因为要做一个带背景的小程序头,哭了,小程序导航栏有背景也就算了,还得让导航栏上的背景顺下来,心态小崩.现在可以单独设置一个页面的小程序头了,但是前提是要微信7.0以上的版本,考虑到兼容性问题 ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- Bootstrap<基础十七>导航栏
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...
随机推荐
- 分享泛微公司OA系统用于二次开发的sql脚本
本单位用的oa系统就是泛微公司的oa协同办公平台,下面是我对他进行二次开发统计用到的写数据库脚本,只做开发参考使用,对于该系统的二次开发技术交流可以加我q:2050372586 [仪表盘]格式sql编 ...
- Android获取SD卡路径及SDCard内存的方法
这篇文章主要介绍了Android获取SD卡路径及SDCard内存的方法,较为详细的分析了Android针对SD卡操作所涉及的类及其具体函数功能,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了A ...
- windows 静态IP设置举例
IP 172.20.108.239 子网掩码 255.255.255.0 网关 172.20.108.1
- hue简单介绍
hue定义: HUE=Hadoop User Experience 个人理解:可视图的webui界面,方便大数据技术之间的CRUD操作. 官方定义:Hue是一个能够与Apache Hadoop交互的W ...
- Java简单的数据库连接
package test.postgre; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Res ...
- Mysql压缩解决方案
提到mysql压缩相关的内容,我们能想到的可能是如下几种和压缩相关的场景: 1.客户端和服务器之间传输的数据量太大,需要进行压缩,节约带宽 2.mysql某个列的数据量大,只针对某个列的数据压缩 3. ...
- 三星平板SM-T320刷机
三星 Galaxy Tab Pro 8.4 (SM-T320) / 国行 固件下载 刷机教程 下载手机驱动,刷机工具Odin,相应的固件包,手机和电脑用数据线连接安装好手机的驱动. 手机先完全的关机, ...
- PHP最全防止sql注入方法
(1)mysql_real_escape_string -- 转义 SQL 语句中使用的字符串中的特殊字符,并考虑到连接的当前字符集 使用方法如下: $sql = "select count ...
- [T-ARA][I'm so bad]
歌词来源:http://music.163.com/#/song?id=22704433 作曲 : 김태현 , 조영수 [作曲 : k/gim-Tae-hyeon , c/jo-yeong-su] 作 ...
- 【转载】MySQl 数据库插入加锁分析
http://yeshaoting.cn/article/database/mysql%20insert%E9%94%81%E6%9C%BA%E5%88%B6/