使用button实现的标签页如何在页面刷新或表单提交后保持当前标签打开？

实现思路 #

通过浏览器本地存储记录当前激活的标签ID，页面加载时优先读取存储的记录打开对应标签，无存储记录时再打开默认标签，即可适配页面刷新、同步表单提交后的状态保持需求。

代码修改 #

可选HTML优化（推荐） #

给每个标签按钮新增data-tab属性，属性值对应绑定的标签内容ID，方便后续快速定位按钮：

<div class="tab">
    <button class="tablinks colora" onclick="tabsetting(event, 'London')" id="defaultOpen" data-tab="London">General settings</button>
    <button class="tablinks color1" onclick="tabsetting(event, 'Paris')" data-tab="Paris">Attendance sheet settings</button>
    <button class="tablinks color0" onclick="tabsetting(event, 'Tokyo')" data-tab="Tokyo">Certificate settings</button>
    <button class="tablinks color01" onclick="tabsetting(event, 'Douala')" data-tab="Douala">Certificate templates</button>
</div>
<!-- 注意补全所有标签对应的tabcontent容器，示例只展示了London对应的容器，Paris、Tokyo、Douala对应的容器需自行补充完整 -->
<div id="London" class="tabcontent"></div>

完整修改后的JS代码 #

function tabsetting(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
    // 新增：存储当前激活的标签ID到本地
    localStorage.setItem('activeTab', cityName);
}

// 页面加载时读取存储的标签状态
window.addEventListener('load', function() {
    const savedTab = localStorage.getItem('activeTab');
    if (savedTab) {
        const targetBtn = document.querySelector(`button[data-tab="${savedTab}"]`);
        // 存储的标签存在则打开对应标签
        if (targetBtn) {
            targetBtn.click();
            return;
        }
    }
    // 无存储记录时打开默认标签
    document.getElementById("defaultOpen").click();
});

注意事项 #

• 如果需要关闭标签页后自动清除存储的标签状态，可将代码中的localStorage替换为sessionStorage即可，sessionStorage会在当前标签页关闭后自动清空存储内容。
• 若表单为异步提交（页面无刷新），本身不会丢失标签状态，无需额外适配。

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