✨Bootstrap导航菜单做active判断✨

在使用Bootstrap构建网站时，导航菜单的动态效果是提升用户体验的重要一环。如何让当前页面对应的菜单项高亮显示呢？这就是我们需要解决的问题——active判断！🔍

首先，确保你的HTML结构正确引入了Bootstrap的相关文件。然后，在每个导航链接上添加`data-bs-target`属性指向对应的目标内容，比如`home`或`about`。接着，利用JavaScript监听滚动事件或者URL变化，动态为当前页面对应的菜单项添加`active`类。例如：

```javascript

window.addEventListener('scroll', () => {

const sections = document.querySelectorAll('section');

sections.forEach(section => {

if (section.getBoundingClientRect().top <= 50 && section.getBoundingClientRect().top >= -50) {

document.querySelectorAll('.nav-link').forEach(link => {

link.classList.remove('active');

if (link.getAttribute('href') === `${section.id}`) {

link.classList.add('active');

}

});

}

});

});

```

这样，当用户滚动到某个区块时，对应的导航菜单就会自动高亮，给访客带来流畅的交互体验。🌟

通过这种方式，不仅能让页面更加美观，还能引导用户快速定位内容，是不是很棒呢？🚀