如何让JavaScript添加的active类在页面刷新后不消失

博客页面的分类导航栏，计划用JavaScript给选中的分类添加active类实现高亮效果。但点击分类链接后，JavaScript虽成功添加了active类，页面加载完成后该类却消失，高亮效果丢失。

现有代码 #

JavaScript代码 #

const tabs = document.querySelectorAll("[data-tab-target]");
const tabContents = document.querySelectorAll("[data-tab-content]");

tabs.forEach((tab) => {
    tab.addEventListener("click", () => {
        const target = document.querySelector(tab.dataset.tabTarget);
        tabContents.forEach((tabContent) => {
            tabContent.classList.remove("active");
        });
        tabs.forEach((tab) => {
            tab.classList.remove("active");
        });
        tab.classList.add("active");
        target.classList.add("active");
    });
});

Blade模板（分类导航）代码 #

<div class="section-sp">
    <div class="category-box">
        <a data-tab-target="#all" class="category active" href="blog/?tag">All</a>
        <a data-tab-target="#code" class="category" href="blog/?tag=Coding">Coding</a>
        <a data-tab-target="#covid" class="category" href="blog/?tag=Covid-19">Covid-19</a>
        <a data-tab-target="#ehr" class="category" href="blog/?tag=EHR">EHR</a>
        <a data-tab-target="#fa" class="category" href="blog/?tag=Financial Analysis">Financial Analysis</a>
        <a data-tab-target="#mb" class="category" href="blog/?tag=Medical Billing">Medical Billing</a>
        <a data-tab-target="#pe" class="category" href="blog/?tag=Patient Engagement">Patient Engagement</a>
        <a data-tab-target="#rcm" class="category" href="blog/?tag=RCM">RCM</a>
        <a data-tab-target="#th" class="category" href="blog/?tag=Telehealth">Telehealth</a>
        <a data-tab-target="#aaa" class="category">GGGG</a>
        <a data-tab-target="#www" class="category">GGGG</a>
    </div>
</div>

问题原因 #

带href的<a>标签点击后会触发页面跳转，浏览器会重新加载整个页面。你写的JavaScript只是在点击瞬间给元素添加了active类，但页面刷新后DOM会被重新渲染，之前的修改自然就消失了。

解决方案 #

方案一：前端读取URL参数，页面加载时自动设置高亮 #

页面加载完成后，读取URL中的tag参数，找到对应的分类链接并添加active类，同时切换内容区块。修改后的JavaScript代码如下：

const tabs = document.querySelectorAll("[data-tab-target]");
const tabContents = document.querySelectorAll("[data-tab-content]");

// 页面加载时根据URL参数设置高亮
function setActiveTabFromUrl() {
    const urlParams = new URLSearchParams(window.location.search);
    const tag = urlParams.get('tag');
    let activeTab;
    let activeTarget;

    if (tag) {
        // 匹配对应tag的分类链接
        activeTab = Array.from(tabs).find(tab => {
            const href = tab.getAttribute('href');
            return href && href.includes(`tag=${encodeURIComponent(tag)}`);
        });
    } else {
        // 默认选中All分类
        activeTab = document.querySelector('[data-tab-target="#all"]');
    }

    if (activeTab) {
        activeTarget = document.querySelector(activeTab.dataset.tabTarget);
        // 移除所有元素的active类
        tabContents.forEach(tabContent => tabContent.classList.remove("active"));
        tabs.forEach(tab => tab.classList.remove("active"));
        // 给当前选中项添加active类
        activeTab.classList.add("active");
        activeTarget.classList.add("active");
    }
}

// 分类点击事件处理
tabs.forEach((tab) => {
    tab.addEventListener("click", () => {
        const target = document.querySelector(tab.dataset.tabTarget);
        tabContents.forEach((tabContent) => {
            tabContent.classList.remove("active");
        });
        tabs.forEach((tab) => {
            tab.classList.remove("active");
        });
        tab.classList.add("active");
        target.classList.add("active");
    });
});

// 页面加载完成后执行高亮设置
window.addEventListener('load', setActiveTabFromUrl);

方案二：后端Blade模板直接渲染active类（更可靠） #

既然使用Laravel的Blade模板，可以直接在后端判断当前请求的tag参数，给对应分类链接添加active类。这种方式页面渲染时就会带有高亮类，无需依赖前端JS，也不会出现刷新丢失的问题。修改Blade代码如下：

<div class="section-sp">
    <div class="category-box">
        <a data-tab-target="#all" class="category {{ request()->get('tag') === null ? 'active' : '' }}" href="blog/?tag">All</a>
        <a data-tab-target="#code" class="category {{ request()->get('tag') === 'Coding' ? 'active' : '' }}" href="blog/?tag=Coding">Coding</a>
        <a data-tab-target="#covid" class="category {{ request()->get('tag') === 'Covid-19' ? 'active' : '' }}" href="blog/?tag=Covid-19">Covid-19</a>
        <a data-tab-target="#ehr" class="category {{ request()->get('tag') === 'EHR' ? 'active' : '' }}" href="blog/?tag=EHR">EHR</a>
        <a data-tab-target="#fa" class="category {{ request()->get('tag') === 'Financial Analysis' ? 'active' : '' }}" href="blog/?tag=Financial Analysis">Financial Analysis</a>
        <a data-tab-target="#mb" class="category {{ request()->get('tag') === 'Medical Billing' ? 'active' : '' }}" href="blog/?tag=Medical Billing">Medical Billing</a>
        <a data-tab-target="#pe" class="category {{ request()->get('tag') === 'Patient Engagement' ? 'active' : '' }}" href="blog/?tag=Patient Engagement">Patient Engagement</a>
        <a data-tab-target="#rcm" class="category {{ request()->get('tag') === 'RCM' ? 'active' : '' }}" href="blog/?tag=RCM">RCM</a>
        <a data-tab-target="#th" class="category {{ request()->get('tag') === 'Telehealth' ? 'active' : '' }}" href="blog/?tag=Telehealth">Telehealth</a>
        <a data-tab-target="#aaa" class="category">GGGG</a>
        <a data-tab-target="#www" class="category">GGGG</a>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Jasper Kenneth Samson