本文介绍如何为bootstrap导航栏的动态高亮条添加响应式控制，确保滑动高亮动画仅在桌面端（屏幕宽度 > 750px）生效，并在窗口缩放时实时启停，避免移动端误触发。
要实现导航菜单高亮条的“仅在大屏启用滚动定位功能”，关键在于动态监听视口宽度变化，而非仅在页面加载时做一次判断。原代码中使用 $(document).width() 在 $(document).ready() 中静态检测，导致窗口缩放后状态无法同步——这是典型的响应式交互遗漏。
✅ 正确做法：用 window.innerWidth + resize 实时判断
window.innerWidth 返回当前视口的像素宽度（含滚动条），比 jquery 的 $(document).width() 更准确、无依赖，且原生性能更优。我们应将核心逻辑封装为可开关的函数，并在初始化和每次 resize 时重新校验条件：
$(document).ready(function() { let isDesktop = window.innerWidth > 750; let highlightActive = false; // 核心高亮更新函数（带条件执行） function updateActiveHighlight(init = false, skipTransition = false) { if (!isDesktop) return; // ❗ 非桌面端直接退出，不执行任何DOM操作 const navTabs = $('.nav-tabs'); const activeTab = navTabs.find('.active > a'); // 注意：.active 在 上，非 if (activeTab.length === 0) return; const navOffset = navTabs.offset(); const tabOffset = activeTab.offset(); const pos = { x: tabOffset.left - navOffset.left, y: tabOffset.top - navOffset.top, w: activeTab.outerWidth(), h: activeTab.outerHeight() }; let highlight = navTabs.find('.active-highlight'); if (init && highlight.length === 0) { navTabs.prepend(' '); highlight = navTabs.find('.active-highlight'); } if (skipTransition) { highlight.css('transition', 'none'); setTimeout(() => highlight.css('transition', 'all .5s ease'), 10); } highlight.css({ width: pos.w, height: pos.h, left: pos.x, top: pos.y }); } // 初始化（仅桌面） if (isDesktop) { updateActiveHighlight(true); } // 监听窗口缩放：动态切换状态 & 更新高亮 $(window).on('resize', function() { const newIsDesktop = window.innerWidth > 750; if (newIsDesktop !== isDesktop) { isDesktop = newIsDesktop; if (isDesktop) { // 切回桌面：立即初始化或恢复高亮 updateActiveHighlight(true); } else { // 切入移动端：移除高亮元素（可选，提升语义清晰度） $('.nav-tabs .active-highlight').remove(); } } else if (isDesktop) { // 仍在桌面区间：仅更新位置（如tab切换后缩放需重算） updateActiveHighlight(false, true); } }); // Tab切换时更新（仅桌面生效） $('[data-bs-toggle="tab"]').on('shown.bs.tab', function() { if (isDesktop) { updateActiveHighlight(); } }); });⚠️ 注意事项与优化点
- 选择器修正：bootstrap 5 中 .active 类实际加在 标签上（非
- ），因此 $(navTabs).find(‘.active’) 应改为 $(navTabs).find(‘.active > a’)，否则定位会失败；
- 过渡重置技巧：为避免 resize 过程中过渡动画卡顿，先临时禁用 transition，再用 setTimeout(…, 1) 异步恢复，确保浏览器重绘；
- 移动端清理：当进入移动视图时主动 remove() 高亮元素，可防止残留 dom 或样式干扰；
- 性能建议：resize 事件高频触发，此处逻辑轻量（仅条件判断+简单计算），无需额外节流；若未来逻辑复杂，可配合 lodash.throttle 优化；
- 无障碍兼容：该功能纯属视觉增强，不影响语义结构与键盘导航，符合 WCAG 基本要求。
✅ 最终效果
- 屏幕 ≥ 751px：高亮条平滑跟随激活 Tab 滑动，支持 Tab 切换与窗口缩放自适应；
- 屏幕 ≤ 750px：完全静默，无高亮元素、无事件绑定、零性能开销；
- 任意尺寸切换（拖拽浏览器边框）：无需刷新，即时响应，行为一致可靠。
通过将响应式逻辑深度融入生命周期（初始化 → resize 监听 → 状态同步 → 条件执行），即可优雅解决“仅大屏启用”的需求，兼顾健壮性与可维护性。