如何实现页面切换时保持导航Tab的onTab类激活状态？

本人是JavaScript新手，使用外部文件生成导航栏。希望实现两个效果：

• 点击导航Tab时，通过onTab类改变其尺寸/位置
• 当该Tab对应页面处于活跃状态时，保持此样式

尝试过多种onClick及类增删函数但未成功，附上相关代码及思路步骤，求正确的JavaScript实现方案。

HTML结构 #

<div id="page-navigator" class="nav-tabs">
  <ul class="tabs">
    <li class="grow-xs onTab"><a href="" class="tab">Tab A</a></li>
    <li class="grow-xs"      ><a href="" class="tab">Tab B</a></li> 
    <li class="grow-xs"      ><a href="" class="tab">Tab C</a></li> 
    <li class="grow-xs"      ><a href="" class="tab">Tab D</a></li>
    <li class="grow-xs"      ><a href="" class="tab">Tab E</a></li> 
    <li class="grow-xs"      ><a href="" class="tab">Tab F</a></li>          
  </ul>
</div>  

思路步骤 #

• 获取当前页面URL
• 获取class为tab的元素
• 查找href与当前URL匹配的tab元素
• 若匹配则为其父元素添加onTab类

尝试的错误JS代码 #

$(document).ready(function ($) {
    function getURL() {
        window.location.href("url")
    });
    var y = document.getElementsByClassName("tag");
    if (x.a[href="window.location.href"]); === y {
        toolbar.classList.add('onTab')
    }
});

核心逻辑说明 #

需要实现两个核心功能：

1. 页面加载完成后，根据当前URL匹配对应的Tab，为其父元素添加onTab类
2. 点击Tab时，移除所有Tab的onTab类，再为当前点击的Tab父元素添加该类；单页场景可阻止默认跳转，多页场景保留跳转后自动激活的逻辑

原生JavaScript实现方案 #

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有tab链接元素
    const tabs = document.querySelectorAll('.tab');
    const currentUrl = window.location.href;

    // 1. 页面初始化：匹配URL激活对应Tab
    tabs.forEach(tab => {
        const tabHref = tab.getAttribute('href');
        // 根据实际路径调整匹配逻辑，比如判断当前URL是否包含tab的href，或路径完全匹配
        if (currentUrl.includes(tabHref) || window.location.pathname === tabHref) {
            tab.parentElement.classList.add('onTab');
        }
    });

    // 2. 点击Tab时切换激活状态
    tabs.forEach(tab => {
        tab.addEventListener('click', function(e) {
            // 单页场景阻止默认跳转，多页场景可删除此行
            e.preventDefault();

            // 移除所有li的onTab类
            document.querySelectorAll('.tabs li').forEach(li => {
                li.classList.remove('onTab');
            });

            // 为当前点击的tab的父元素添加onTab类
            this.parentElement.classList.add('onTab');
        });
    });
});

jQuery实现方案 #

如果你习惯使用jQuery，可采用以下实现：

$(document).ready(function() {
    const $tabs = $('.tab');
    const currentUrl = window.location.href;

    // 1. 页面初始化匹配URL激活Tab
    $tabs.each(function() {
        const tabHref = $(this).attr('href');
        if (currentUrl.includes(tabHref) || window.location.pathname === tabHref) {
            $(this).parent().addClass('onTab');
        }
    });

    // 2. 点击Tab切换激活状态
    $tabs.click(function(e) {
        e.preventDefault(); // 单页场景阻止跳转，多页场景可删除此行
        $('.tabs li').removeClass('onTab');
        $(this).parent().addClass('onTab');
    });
});

注意事项 #

• 确保每个Tab的href属性填写正确的页面路径（如tab-a.html、/tab-b等），否则URL匹配逻辑无法生效
• 多页应用中，点击Tab后页面会刷新，此时页面初始化的匹配逻辑会自动激活对应Tab
• 单页应用需配合路由逻辑调整URL，确保页面刷新后仍能匹配到正确的Tab

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