ASP.NET中回发后保持JavaScript选中标签激活的实现方法

问题分析 #

你当前的代码依赖Bootstrap的.tab('show')方法，但原生标签页需要自己实现状态恢复逻辑。核心思路是在切换标签时保存选中状态，页面加载时读取状态并激活对应标签，这里推荐用localStorage（客户端刷新后仍保留数据）结合你的HiddenField（兼顾服务器端取值需求）。

修改后的代码实现 #

1. 更新标签切换函数（保存选中状态）

修改openTab函数，添加本地存储逻辑：

function openTab(evt, tabName) {
    var i, mtabcontent, tablinks;
    mtabcontent = document.getElementsByClassName("map-tabcontent");
    const selectedValue = evt.currentTarget.attributes.value.value;
    
    // 同时更新HiddenField（供服务器端读取）和本地存储（客户端刷新保留）
    $("#<%=selectedTab.ClientID%>").val(selectedValue);
    localStorage.setItem('activeTab', tabName);

    // 隐藏所有标签内容
    for (i = 0; i < mtabcontent.length; i++) {
        mtabcontent[i].style.display = "none";
    }
    // 移除所有标签的active类
    mtablinks = document.getElementsByClassName("map-tablinks");
    for (i = 0; i < mtablinks.length; i++) {
        mtablinks[i].className = mtablinks[i].className.replace(" active", "");
    }
    // 激活当前标签
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}

2. 页面加载时恢复选中标签（原生JS实现）

替换原来的jQuery初始化代码，改成原生逻辑：

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 优先级：本地存储 > HiddenField值 > 默认Tab1
    const savedTab = localStorage.getItem('activeTab') || 
                     (document.getElementById('<%= selectedTab.ClientID%>').value === '1' ? 'Tab2' : 'Tab1');
    
    // 找到对应的标签元素（优化：可给a标签加data-tab属性替代依赖onclick）
    const tabLink = document.querySelector(`.map-tablinks[onclick*="${savedTab}"]`);
    if (tabLink) {
        // 手动触发切换逻辑
        openTab({ currentTarget: tabLink }, savedTab);
    }
});
</script>

可选优化（更健壮的标签查找方式）

给HTML中的标签添加data-tab属性，避免依赖onclick属性查找：

<a class="map-tablinks active" onclick="openTab(event, 'Tab1')" id="defaultOpen" value="0" data-tab="Tab1" runat="server">Kharif</a>
<a class="map-tablinks" onclick="openTab(event, 'Tab2')" id="defaultOpen1" value="1" data-tab="Tab2" runat="server">Rabi</a>

然后初始化时修改查找逻辑：

const tabLink = document.querySelector(`.map-tablinks[data-tab="${savedTab}"]`);

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