当前位置：首页 > news >正文

使用JavaScript和CSS创建动态高亮导航栏

news 2025/9/20 8:09:44

使用JavaScript和CSS创建"动态高亮"导航栏

在本教程中，Blake Lundquist将带领我们使用纯JavaScript和CSS实现"动态高亮"导航模式的两种方法。第一种技术使用getBoundingClientRect方法，在导航栏项目被点击时显式地动画化边框。第二种方法使用新的View Transition API实现相同的功能。

初始标记

假设我们有一个单页面应用，内容变化时页面不会重新加载。起始的HTML和CSS是标准的导航栏，额外包含一个id为#highlight的div元素。我们给第一个导航项添加.active类。

#highlight {z-index: 0;position: absolute;height: 100%;width: 100px;left: -200px;border: 2px solid green;box-sizing: border-box;transition: all 0.2s ease;
}

添加点击事件处理程序

我们希望高亮元素在用户更改.active导航项时产生动画效果。让我们为nav元素添加点击事件处理程序：

const navbar = document.querySelector('nav');navbar.addEventListener('click', function (event) {if (!event.target.matches('nav a:not(active)')) {return;}document.querySelector('nav a.active').classList.remove('active');event.target.classList.add('active');
});

移动高亮功能

使用getBoundingClientRect获取元素位置和尺寸信息：

const moveHighlight = () => {const activeNavItem = document.querySelector('a.active');const highlighterElement = document.querySelector('#highlight');const width = activeNavItem.offsetWidth;const itemPos = activeNavItem.getBoundingClientRect();const navbarPos = navbar.getBoundingClientRect()const relativePosX = itemPos.left - navbarPos.left;const styles = {left: `${relativePosX}px`,width: `${width}px`,};Object.assign(highlighterElement.style, styles);
}

使用View Transition API

对于这种方法，我们不再需要单独的#highlight元素：

nav a::after {content: " ";position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: none;box-sizing: border-box;
}nav a.active::after {border: 2px solid green;view-transition-name: highlight;
}

使用startViewTransition方法触发过渡：

navbar.addEventListener('click', async function (event) {if (!event.target.matches('nav a:not(.active)')) {return;}document.startViewTransition(() => {document.querySelector('nav a.active').classList.remove('active');event.target.classList.add('active');});
});

调整视图过渡

为了解决尺寸不一致问题：

::view-transition-old(highlight) {height: 100%;
}::view-transition-new(highlight) {height: 100%;
}

最终代码重构

添加回退支持：

const setActiveElement = (elem) => {document.querySelector('nav a.active').classList.remove('active');elem.classList.add('active');
}navbar.addEventListener('click', async function (event) {if (!event.target.matches('nav a:not(.active)')) {return;}if (!document.startViewTransition) {setActiveElement(event.target);return;}document.startViewTransition(() => setActiveElement(event.target));
});