求助：基于URL参数实现选中div的持久化颜色（jQuery）

阿华AIGC实验室

2026-5-28

解决菜单刷新后选中样式丢失的问题

这问题太常见了！你之前用jQuery在点击时添加内联样式，页面一刷新DOM就重新加载，样式自然就没了。咱们得换个思路——从URL参数里读取当前选中的菜单层级，在页面加载时就给对应的元素加上样式，这样刷新后样式也能保留。

步骤1：定义一个CSS类（比内联样式更灵活）

先写个专门的选中样式类，以后改样式直接动CSS就行，不用碰JS：

.table_caption_H.active-menu {
    color: red;
    /* 还可以加其他样式增强选中效果，比如： */
    /* background-color: #f5f5f5; */
    /* border-left: 3px solid red; */
}

步骤2：写一个URL参数解析函数

用来从当前页面的URL里提取MainMenuId、submenuId这些参数值：

function getUrlParam(paramName) {
    // 用原生URLSearchParams解析参数，兼容大部分现代浏览器
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(paramName);
}

步骤3：页面加载时自动匹配菜单并添加样式

在DOM加载完成后，读取URL参数，找到对应的菜单元素，给它加上active-menu类：

$(document).ready(function() {
    // 获取当前URL里的菜单参数
    const currentMainMenu = getUrlParam('MainMenuId');
    const currentSubMenu = getUrlParam('submenuId');

    // 匹配主菜单：找到href包含当前MainMenuId的a标签，给它的父div加样式
    if (currentMainMenu) {
        $('.table_caption_H a[href*="MainMenuId=' + currentMainMenu + '"]')
            .closest('.table_caption_H')
            .addClass('active-menu');
    }

    // 匹配子菜单：如果有submenuId参数，给对应的子菜单加样式（可同时保留主菜单高亮）
    if (currentSubMenu) {
        $('.table_caption_H a[href*="submenuId=' + currentSubMenu + '"]')
            .closest('.table_caption_H')
            .addClass('active-menu');
    }

    // 保留点击时的即时样式切换（可选，让用户点击时立刻看到反馈）
    $('.table_caption_H').click(function(e) {
        // 先移除所有菜单的选中样式，避免多个菜单同时高亮
        $('.table_caption_H').removeClass('active-menu');
        // 给当前点击的菜单加样式
        $(this).addClass('active-menu');
    });
});

额外建议

如果你需要兼容非常老的浏览器（比如IE11），URLSearchParams可能不支持，可以换成正则解析URL参数的写法：

function getUrlParam(paramName) {
    const regex = new RegExp('[?&]' + paramName + '(=([^&#]*)|&|#|$)');
    const results = regex.exec(window.location.href);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}