本文介绍如何实现导航标签栏的动态高亮滑动效果，并确保该功能仅在桌面端（屏幕宽度 > 750px）启用，通过监听 `resize` 事件实时响应窗口尺寸变化，避免因未刷新页面导致的响应失效问题。
要让导航菜单的滑动高亮效果（如 .active-highlight 动态跟随激活 Tab）智能适配设备断点，关键在于：不仅需在页面加载时判断屏幕尺寸，更需在窗口缩放过程中持续校验并启停逻辑。直接使用 $(document).width() 在 resize 中检测存在兼容性与时机问题；而 window.innerWidth 是更可靠、标准的视口宽度获取方式，且能实时反映当前浏览器窗口尺寸。
以下是优化后的完整实现方案：
✅ 正确做法：基于 window.innerWidth 的动态启停控制
$(document).ready(function() {
let isDesktopMode = window.innerWidth > 750;
// 初始化高亮元素（仅在桌面模式下执行）
function initHighlight() {
if (!isDesktopMode) return;
const navTabs = $('.nav-tabs');
if (navTabs.find('.active-highlight').length === 0) {
navTabs.prepend('<li class="active-highlight"></li>');
}
}
// 更新高亮位置（仅在桌面模式下执行）
function updateHighlight(resize = false) {
if (!isDesktopMode) return;
const navTabs = $('.nav-tabs');
const activeTab = navTabs.find('.active');
if (!activeTab.length) return;
const navPos = navTabs.offset();
const tabPos = activeTab.offset();
const highlight = navTabs.find('.active-highlight');
const left = tabPos.left - navPos.left;
const top = tabPos.top - navPos.top;
const width = activeTab.outerWidth();
const height = activeTab.outerHeight();
highlight.css({
'transition': resize ? 'none' : 'all .5s ease',
'width': width + 'px',
'height': height + 'px',
'left': left + 'px',
'top': top + 'px'
});
}
// 页面加载时初始化
initHighlight();
updateHighlight(true); // 首次无过渡
// 监听窗口尺寸变化，动态切换模式并更新状态
$(window).on('resize', function() {
const newMode = window.innerWidth > 750;
if (newMode !== isDesktopMode) {
isDesktopMode = newMode;
if (isDesktopMode) {
initHighlight();
updateHighlight(true);
} else {
// 移除高亮（可选：提升移动端性能/语义清晰）
$('.nav-tabs .active-highlight').remove();
}
} else if (isDesktopMode) {
updateHighlight();
}
});
// Tab 切换时更新高亮（仅桌面生效）
$('[data-bs-toggle="tab"]').on('shown.bs.tab', function() {
if (isDesktopMode) updateHighlight();
});
});⚠️ 注意事项与最佳实践
- 避免重复初始化：使用 isDesktopMode 标志位控制逻辑开关，防止在 resize 过程中反复创建 .active-highlight 元素；
- 移动端优雅降级：当进入移动端（≤750px），主动移除高亮元素，既节省资源，也避免样式残留干扰；
- 性能优化：resize 事件高频触发，此处未做防抖（debounce），因逻辑轻量；若项目复杂，建议添加 requestAnimationFrame 或节流处理；
-
CSS 补充建议：为确保 .active-highlight 在小屏下完全隐藏（即使 JS 未及时移除），可在 CSS 中追加：
@media (max-width: 750px) { .nav-tabs > .active-highlight { display: none !important; } }
该方案彻底解决了“仅刷新生效”的缺陷，实现了真正的响应式交互——无论用户是首次访问、横竖屏切换，还是拖拽浏览器窗口，高亮行为均能精准匹配当前设备视口，兼顾体验与健壮性。
