响应式Tabs导航页面重载时移动端显示激活标签问题

我有一组支持响应式查询的可滚动Tabs导航，目前在响应式模式下重载页面时，默认会展示第一个导航标签，但需求是在移动端打开页面时直接显示已激活的标签（比如示例中的“کمپینگ”标签）。

相关HTML代码如下：

<div class="nav tabs-list" id="trips-tab" role="tablist">
    <a id="pills-home-1" data-toggle="pill" href="#home1" role="tab" aria-controls="home1" aria-selected="false">پیمایشی</a>
    <a id="pills-home-2" data-toggle="pill" href="#home2" role="tab" aria-controls="home2" aria-selected="false">طبیعت گردی</a>
    <a id="pills-home-3" data-toggle="pill" href="#home3" role="tab" aria-controls="home3" aria-selected="false">ماجراجویی</a>
    <a class="active" id="pills-home-4" data-toggle="pill" href="#home4" role="tab" aria-controls="home4" aria-selected="true">
        <img src="assets/img/campground.svg">
        کمپینگ
    </a>
    <a class="" id="pills-home-5" data-toggle="pill" href="#home5" role="tab" aria-controls="home5" aria-selected="false">کوهنوردی</a>
    <a class="" id="pills-home-6" data-toggle="pill" href="#home6" role="tab" aria-controls="home6" aria-selected="false">دوچرخه</a>
    <a class="" id="pills-home-7" data-toggle="pill" href="#home7" role="tab" aria-controls="home7" aria-selected="false">تور کودک</a>
</div>

解决方案 #

通过JavaScript在页面加载时检测移动端视口，自动将Tabs容器滚动到激活标签的位置：

原生JavaScript实现（页面加载+窗口 resize 监听）

// 页面加载完成后调整滚动位置
document.addEventListener('DOMContentLoaded', adjustActiveTabScroll);
// 窗口大小改变时重新调整
window.addEventListener('resize', adjustActiveTabScroll);

function adjustActiveTabScroll() {
    // 根据项目响应式断点设置移动端阈值，这里以768px为例
    const mobileBreakpoint = 768;
    const isMobile = window.innerWidth < mobileBreakpoint;
    
    if (!isMobile) return;
    
    const activeTab = document.querySelector('#trips-tab a.active');
    const tabsContainer = document.getElementById('trips-tab');
    
    if (activeTab && tabsContainer) {
        // 将激活标签滚动到容器居中位置，可根据需求改为直接滚动到标签左侧：activeTab.offsetLeft
        tabsContainer.scrollLeft = activeTab.offsetLeft - (tabsContainer.offsetWidth / 2) + (activeTab.offsetWidth / 2);
    }
}

说明 #

1. 定义adjustActiveTabScroll函数统一处理页面加载和窗口尺寸变化时的滚动调整逻辑
2. 判断当前视口是否为移动端，非移动端直接跳过处理
3. 定位激活Tab元素和Tabs容器，通过计算设置容器scrollLeft值，让激活标签显示在可视区域（示例采用居中显示，若无需居中，直接赋值activeTab.offsetLeft即可）

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