zoukankan      html  css  js  c++  java
  • 页面刷新-导航高亮不变

    html:

    <ul class="nav nav-tabs choose_nav" role="tablist" id="vtab">
                                <li role="presentation" class="active nav-item">
                                    <a href="{:url('index/personal_right')}?id=1"
                                       class="nav-link active">资料</a>
                                </li>
                                <li role="presentation" class="nav-item">
                                    <a href="{:url('index/personal_image')}?id=2"
                                       class="nav-link">相册</a>
                                </li>
                                <li role="presentation" class="nav-item">
                                    <a href="{:url('index/personal_recharge')}?id=3" class="nav-link">充值</a>
                                </li>
                                <li role="presentation" class="nav-item">
                                    <a href="{:url('index/personal_message')}?id=4" class="nav-link">私信</a>
                                </li>
                                <li role="presentation" class="nav-item">
                                    <a href="{:url('index/personal_friend')}?id=5" class="nav-link">好友</a>
                                </li>
                                <li role="presentation" class="nav-item">
                                    <a href="{:url('index/personal_focus')}?id=6" class="nav-link">关注</a>
                                </li>
                            </ul>

    js:

    $("#vtab li a").each(function () {
            let _winHref = String(window.location); // 监听url变化
            if ($(this)[0].href == _winHref) { //$(this[0].href):当前url
                $(this).addClass("active").parent('li').siblings().find('a').removeClass("active");
                $(this).closest('ul').parent("li").addClass("active").siblings().removeClass("active");
            }
        });
  • 相关阅读:
    速达开发小组面试题分享下
    NC V6 nchome文件目录及其作用介绍
    GIL 线程池 进程池 同步 异步 阻塞 非阻塞
    线程
    守护进程进程安全
    并发
    22个所见即所得在线 Web 编辑器
    asp.net操纵Oracle存储过程
    JQuery 中each的使用方法
    JQuery实现简单的服务器轮询效果
  • 原文地址:https://www.cnblogs.com/LindaBlog/p/13850883.html
Copyright © 2011-2022 走看看