ASP.NET母版页菜单按钮点击变色后跳转子页面恢复初始颜色问题

我来帮你解决这个母版页菜单按钮高亮的问题——这个坑我之前也踩过！因为跳转子页面时会触发全新的HTTP请求，母版页会重新渲染，之前JS设置的focus类自然就被重置回初始的button类了。下面给你几种实用的解决方案，按需选就行：

方法1：通过URL匹配实现前端自动高亮（无需后台代码） #

这个方法最直接，适合每个按钮对应固定子页面的场景。思路是页面加载时读取当前URL，匹配对应的按钮并添加高亮类。

母版页按钮HTML： #

<div>
    <input type="button" id="t1" class="button" onclick="window.location.href='Page1.aspx'" value="按钮1">
    <input type="button" id="t2" class="button" onclick="window.location.href='Page2.aspx'" value="按钮2">
    <input type="button" id="t3" class="button" onclick="window.location.href='Page3.aspx'" value="按钮3">
    <input type="button" id="t4" class="button" onclick="window.location.href='Page4.aspx'" value="按钮4">
</div>

页面加载时的JS代码： #

window.addEventListener('load', function() {
    // 获取当前页面的路径
    const currentPath = window.location.pathname;
    
    // 根据路径匹配对应的按钮并添加高亮类
    if (currentPath.includes('Page1.aspx')) {
        document.getElementById('t1').classList.add('focus');
    } else if (currentPath.includes('Page2.aspx')) {
        document.getElementById('t2').classList.add('focus');
    } else if (currentPath.includes('Page3.aspx')) {
        document.getElementById('t3').classList.add('focus');
    } else if (currentPath.includes('Page4.aspx')) {
        document.getElementById('t4').classList.add('focus');
    }
});

优点：纯前端实现，无需修改后台代码；缺点：如果子页面路径变更，需要同步修改JS中的匹配规则。

方法2：利用Session保存高亮状态（后台驱动） #

如果你的菜单按钮对应动态页面，或者需要更灵活的状态管理，可以用Session保存当前选中的按钮ID，母版页加载时从Session读取并设置高亮。

母版页后台C#代码： #

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 从Session读取当前激活的按钮ID
        if (Session["ActiveMenuButton"] != null)
        {
            string activeBtnId = Session["ActiveMenuButton"].ToString();
            // 找到对应的服务器控件并添加高亮类
            HtmlInputButton activeBtn = (HtmlInputButton)FindControl(activeBtnId);
            if (activeBtn != null)
            {
                activeBtn.Attributes["class"] = "button focus";
            }
        }
    }
}

// 按钮点击的服务器端事件
protected void MenuButton_Click(object sender, EventArgs e)
{
    HtmlInputButton clickedBtn = (HtmlInputButton)sender;
    // 将当前按钮ID存入Session
    Session["ActiveMenuButton"] = clickedBtn.ID;
    
    // 根据按钮ID跳转到对应子页面
    switch (clickedBtn.ID)
    {
        case "t1":
            Response.Redirect("Page1.aspx");
            break;
        case "t2":
            Response.Redirect("Page2.aspx");
            break;
        case "t3":
            Response.Redirect("Page3.aspx");
            break;
        case "t4":
            Response.Redirect("Page4.aspx");
            break;
    }
}

母版页按钮HTML（改为服务器控件）： #

<div>
    <input type="button" id="t1" class="button" runat="server" onserverclick="MenuButton_Click" value="按钮1">
    <input type="button" id="t2" class="button" runat="server" onserverclick="MenuButton_Click" value="按钮2">
    <input type="button" id="t3" class="button" runat="server" onserverclick="MenuButton_Click" value="按钮3">
    <input type="button" id="t4" class="button" runat="server" onserverclick="MenuButton_Click" value="按钮4">
</div>

优点：状态管理更灵活，支持动态页面；缺点：依赖服务器Session，若Session过期会丢失状态。

方法3：使用Cookie保存高亮状态（客户端持久化） #

如果需要跨会话保留菜单高亮状态（比如用户关闭浏览器再打开仍保持上次选中的按钮），可以用Cookie代替Session。

母版页后台C#代码修改： #

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 从Cookie读取当前激活的按钮ID
        HttpCookie activeBtnCookie = Request.Cookies["ActiveMenuButton"];
        if (activeBtnCookie != null)
        {
            string activeBtnId = activeBtnCookie.Value;
            HtmlInputButton activeBtn = (HtmlInputButton)FindControl(activeBtnId);
            if (activeBtn != null)
            {
                activeBtn.Attributes["class"] = "button focus";
            }
        }
    }
}

protected void MenuButton_Click(object sender, EventArgs e)
{
    HtmlInputButton clickedBtn = (HtmlInputButton)sender;
    // 创建Cookie并设置有效期（比如7天）
    HttpCookie activeBtnCookie = new HttpCookie("ActiveMenuButton", clickedBtn.ID);
    activeBtnCookie.Expires = DateTime.Now.AddDays(7);
    Response.Cookies.Add(activeBtnCookie);
    
    // 跳转逻辑同方法2
    switch (clickedBtn.ID)
    {
        case "t1":
            Response.Redirect("Page1.aspx");
            break;
        // 其他按钮同理
    }
}

优点：状态持久化，跨会话保留；缺点：状态存储在客户端，若用户清除Cookie会丢失状态。

内容的提问来源于stack exchange，提问作者BoutrosDouaihy