jquery,javaScript(根据Url动态设置菜单CSS样式)获取当前URL并加上css样式

视频讲解地址 https://www.bilibili.com/video/BV1VT411J7rt

Html 代码

<nav class="sidebar-main">
    <ul id="menu" class="nav nav-drawer">
        <li class="nav-item  active"> <a href="/AdminWeb/index"><i class="mdi mdi-home"></i> 后台首页</a> </li>
        <li class="nav-item nav-item-has-subnav">
            <a href="javascript:void(0)"><i class="mdi mdi-account-multiple"></i>用户信息</a>
            <ul class="nav nav-subnav">
                <li> <a href="/userinfo/index">用户管理</a> </li>
            </ul>
        </li>
        <li class="nav-item nav-item-has-subnav">
            <a href="javascript:void(0)"><i class="mdi mdi-format-align-justify"></i> 订单信息</a>
            <ul class="nav nav-subnav">
                <li> <a href="/OrderInfo/Index">订单管理</a> </li>
            </ul>
        </li>
        <li class="nav-item nav-item-has-subnav">
            <a href="javascript:void(0)"><i class="mdi mdi-buffer"></i> 题库信息</a>
            <ul class="nav nav-subnav">
                <li> <a href="/AllKM/Index">所有科目</a> </li>
                <li> <a href="/ST/Index">所有试题</a> </li>
            </ul>
        </li>
    </ul>
</nav>

js代码

let urn = window.location.pathname.toLowerCase();//获取文件路径 并转小写
let li = $("#menu li>a");//获取 ID为meun 下所有li下的a标签
li.each(function (i) {
    if (urn == '/' || urn == '/adminweb/index') {//判断是否是首页
        li[i].parentElement.className += ' active';//给标签添加class
        return false;
    } else {
        if (urn.indexOf(li[i].pathname.toLowerCase()) == 0) {//判断是否是当前url
            li[i].parentElement.className += ' active';//给换标签添加 css样式 注意空格
            li[i].parentElement.parentElement.parentElement.className += ' active open';
            return false;
        }
    }
});

知识扩展

var url;
url = window.location.href; /* 获取完整URL */
alert(url); /* http://127.0.0.1:8020/Test/index.html#test?name=test */

url = window.location.pathname; /* 获取文件路径（文件地址） */
alert(url); /* /Test/index.html */

url = window.location.protocol; /* 获取协议 */
alert(url); /* http */

url = window.location.host; /* 获取主机地址和端口号 */
alert(url); /* http://127.0.0.1:8020/ */

url = window.location.hostname; /* 获取主机地址 */
alert(url); /* http://127.0.0.1/ */

url = window.location.port; /* 获取端口号 */
alert(url); /* 8020 */

url = window.location.hash; /* 获取锚点（“#”后面的分段） */
alert(url); /* #test?name=test */

url = window.location.search; /* 获取属性（“?”后面的分段） */
alert(url);

/* 如果需要URL中的某一部分，可以自己进行处理 */
url = window.location.pathname;
url = url.substring(url.lastIndexOf('/') + 1, url.length);
alert(url); /* /index.html */

/* 
 * 如果页面使用了框架（frameset）
 * 要获取到指定页面的URL
 * 只要把window换成指定的页面即可
 */
/* 'frame'为指定页面的class名 */
var url = window.parent.frames['frame'].location.href;
/* 获取当前地址栏中显示的URL */
var url = window.parent.location.href;
/* window parent 可互换 */
var url = parent.window.location.href;