专栏首页编程微刊页面刷新跳转的,保持当前选中项高亮

页面刷新跳转的,保持当前选中项高亮

今天写一个不太难的问题,但是对于有些知识点盲区的地方,就要花一些时间去百度,查资料解决问题了。项目开发的时候会遇到这样或者那样的问题,比如,左侧导航栏二级菜单点击之后,跳转新的界面,新的界面的高亮状态是点击时候的状态。

实现代码如下 html代码

<li ><a  href="#"><i class="fa fa-cogs"></i><span th:text="#{side.data}"></span></a>
            <ul class="allnav">
                <li><a href="staff"><span  th:text="#{side.data.staff}"></span></a></li>
                <li><a href="caller"><span th:text="#{side.data.caller}"></span></a></li>
                <li><a href="stat"><span th:text="#{side.data.stat}"></span></a></li>
                <li><a href="device"><span th:text="#{side.data.status}"></span></a></li>
            </ul>
        </li>

js代码

  /*  href 属性是一个可读可写的字符串,可设置或返回当前显示的文档的完整 URL
    $(this)[0].href   当前页面打开URL页面*/

$(".allnav li a").each(function () {        
                //window.location.href对象用于获得当前页面的地址 (URL),
                //String() 函数把对象的值转换为字符串    
            if ($(this)[0].href == String(window.location)) {
                //该元素增加一个类on同时它的兄弟元素去掉on类
                //二级菜单高亮
                $(this).addClass("on").siblings().removeClass("on");    
                //一级菜单高亮
                $(this).closest('ul').parent("li").addClass("on").siblings().removeClass("on"); 
            }
    });

css

.on {
   font-weight: bold;
   background:blue; 
}

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • flask jinja模板使用

    用户5760343
  • angularJS学习之路(六)---指令

    一个东西需要说明:根据HTML标准,布尔属性代表一个true或者false值,当这个属性出现的时候,这个属性的值就是true, 无论实际值是什么,如果未...

    wust小吴
  • 实现高效端口扫描

    Python-nmap介绍: http://xael.org/pages/python-nmap-en.html

    用户5766185
  • angularJS学习之路(七)---子控制器关于是引用机制还是复制机制的问题---原型继承

    原型继承 要弄清一点:    修改父级对象中的alue值会同时修改 子对象中的alue值,但是反过来就不行了,

    wust小吴
  • angularJS学习之路(十七)---自定义指令

    指令简单理解  就是   在元素上运行的函数    (这个函数有个名称,或者叫属性,比如id 等这种形式)

    wust小吴
  • bootstrap 表单验证 常用

    用户5760343
  • angularJS学习之路(三十)---自定义指令---templateUrl

    不过这里因为js目录是当前的目录,你的html目录肯定在另外一个文件夹里,所以自己记得路径的问题

    wust小吴
  • flask html页面中放动态链接

    用户5760343
  • angularJS学习之路(五)---表达式

    AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。

    wust小吴
  • 容器的文件系统

    很多时候都会焦虑,为什么会焦虑呢,因为变化的太快了?急于看到结果?基于事实去看的话,焦虑可能要少点儿,焦虑的时候多注意观察,慢慢积累沉淀。

    SRE运维实践

扫码关注云+社区

领取腾讯云代金券