ASP.NET/C#标签页按钮背景色切换异常问题求助

看起来你遇到的核心问题是页面刷新导致前端状态丢失——因为你用window.location.href跳转后，整个页面重新加载，之前通过JS添加的active类自然就没了，所以才会只生效1秒。下面给你两种针对性的解决方案，分别对应「服务器端标签页（需要页面刷新）」和「客户端无刷新标签页」的场景：

这种方式让后端记住当前激活的标签页，页面渲染时自动给对应按钮加上active类，从根源解决状态丢失问题：

1. 后端C#代码 #

假设你的标签页按钮对应不同的路由/Action，点击时传递tabId参数来标记当前标签：

public ActionResult Index(string tabId = "tab1")
{
    // 将当前激活的tabId存入ViewBag，供前端视图渲染使用
    ViewBag.ActiveTab = tabId;
    return View();
}

2. ASP.NET Razor视图代码 #

渲染按钮时，通过ViewBag判断当前标签，给对应按钮自动加上active类：

<button class="tab-btn @(ViewBag.ActiveTab == "tab1" ? "active" : "")" 
        onclick="location.href='@Url.Action("Index", new { tabId = "tab1" })'">
    标签页1
</button>
<button class="tab-btn @(ViewBag.ActiveTab == "tab2" ? "active" : "")" 
        onclick="location.href='@Url.Action("Index", new { tabId = "tab2" })'">
    标签页2
</button>

3. 补充CSS样式 #

确保active类的样式优先级足够，避免被默认样式覆盖：

.tab-btn {
    background-color: #eee;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
}
.tab-btn.active {
    background-color: #2196F3;
    color: #fff;
    /* 其他激活状态样式 */
}

这样每次页面刷新时，后端会根据tabId参数自动给对应按钮加上active类，样式就不会消失了。

如果你的标签页内容可以通过JS动态切换，那就完全不用window.location.href跳转，直接在客户端管理active类和内容显示：

1. 前端HTML结构 #

<div class="tab-buttons">
    <button class="tab-btn active" data-tab="tab1">标签页1</button>
    <button class="tab-btn" data-tab="tab2">标签页2</button>
</div>
<div class="tab-content">
    <div id="tab1" class="tab-pane active">标签页1内容</div>
    <div id="tab2" class="tab-pane">标签页2内容</div>
</div>

2. JavaScript代码 #

// 获取所有标签按钮和内容面板
const tabButtons = document.querySelectorAll('.tab-btn');
const tabPanes = document.querySelectorAll('.tab-pane');

// 给每个按钮绑定点击事件
tabButtons.forEach(button => {
    button.addEventListener('click', () => {
        // 移除所有按钮的active类
        tabButtons.forEach(btn => btn.classList.remove('active'));
        // 给当前点击按钮添加active类
        button.classList.add('active');
        
        // 获取当前按钮对应的标签ID
        const targetTabId = button.getAttribute('data-tab');
        
        // 隐藏所有内容面板
        tabPanes.forEach(pane => pane.classList.remove('active'));
        // 显示对应内容面板
        document.getElementById(targetTabId).classList.add('active');
    });
});

3. CSS样式 #

.tab-btn {
    background-color: #eee;
    border: none;
    padding: 8px 16px;
    cursor: pointer;
}
.tab-btn.active {
    background-color: #2196F3;
    color: #fff;
}
.tab-pane {
    display: none;
    padding: 16px;
    border: 1px solid #eee;
    margin-top: 8px;
}
.tab-pane.active {
    display: block;
}

这种方式完全在客户端处理，不需要页面刷新，active类的状态会一直保留。如果需要加载服务器端内容，可以在点击按钮时用AJAX请求数据，再动态更新内容面板。

因为你调用window.location.href后，浏览器会立即发起新页面请求，当前页面的DOM会被销毁——你之前通过JS添加的active类只是在页面销毁前短暂显示了一下，新页面加载后就恢复默认样式了。这就是问题的核心，要么让后端记住状态，要么避免页面刷新。

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