JavaScript页面跳转失效求助：点击按钮无法跳转至新页面

你的页面跳转失效的核心原因是：按钮位于<form>标签内，且按钮的type="submit"。点击这类按钮时，浏览器会优先触发表单的默认提交行为（刷新当前页面，或向指定地址提交表单），这会直接中断window.location.href的跳转逻辑。

以下是几种可行的解决方案：

方案1：修改按钮类型 #

将按钮的type从submit改为button，彻底避免触发表单提交行为：

<button onclick="pageSwitch()" id="home-button" class="btn btn-primary px-md-4" type="button">Blog</button>

方案2：阻止表单默认提交行为 #

如果需要保留type="submit"，可以在点击事件中阻止浏览器的默认行为：

方式A：修改自定义函数 #

function pageSwitch(e) {
    e.preventDefault(); // 阻止表单默认提交
    window.location.href = './blog.html';
}

同时在按钮的onclick中传入事件参数：

<button onclick="pageSwitch(event)" id="home-button" class="btn btn-primary px-md-4" type="submit">Blog</button>

方式B：使用事件监听 #

document.getElementById('home-button').addEventListener('click', function(e) {
    e.preventDefault(); // 阻止表单默认提交
    window.location.href = './blog.html';
});

方案3：移除不必要的<form>标签 #

如果这个<form>标签没有实际的表单提交需求（比如没有输入框、不需要提交数据），直接删除<form>标签，仅保留按钮即可：

<div class="d-flex" role="search">
    <button onclick="pageSwitch()" id="home-button" class="btn btn-primary px-md-4">Blog</button>
</div>

另外，你同时使用了onclick属性和DOM事件监听绑定跳转逻辑，这会导致点击按钮时两个事件同时触发，建议只保留一种绑定方式，避免冗余代码。

内容的提问来源于stack exchange，提问作者Mostafa Ferdaous Nayeem