如何通过JavaScript触发Bootstrap导航栏链接点击实现页面跳转

问题根因 #

你设置的section2Button是<li>列表项的ID，实际承载锚点跳转逻辑的是它内部的<a class="nav-link">元素，直接触发li标签的点击事件不会触发锚点跳转。

解决方法 #

方法1：触发a标签的点击事件（和手动点击导航效果完全一致） #

document.querySelector('#section2Button .nav-link').click();

如果需要同步Bootstrap导航的激活高亮状态，可补充以下代码：

// 清除所有导航项的激活状态
document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
// 给当前导航项加激活状态
document.getElementById('section2Button').classList.add('active');

方法2：直接修改锚点实现跳转（更简洁） #

如果不需要触发导航链接绑定的其他点击事件，直接修改页面哈希值即可实现跳转：

window.location.hash = '#section2';

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