如何实现点击按钮跳转页面？适用于登录页JS开发场景

首先明确：href是<a>标签的专属属性，直接给加href不会生效，用JS实现跳转有以下两种常用方案：

• 方案1：行内绑定点击事件（快速实现）
  直接在按钮标签上添加onclick属性即可，不需要额外写JS代码：

<button onclick="window.location.href = '你的目标页面路径，如./home.html'">登录</button>

注意替换单引号内的地址为你实际需要跳转的页面路径，支持相对路径和绝对路径

• 方案2：单独绑定事件监听（可扩展性更强，更推荐）
  这种方式可以在跳转前加入登录校验逻辑，比如判断账号密码是否输入、验证是否通过，符合登录页的使用场景：
  首先写按钮HTML：

<button id="loginSubmitBtn">登录</button>

然后添加JS逻辑，可以写在页面<script>标签里，也可以放在单独的JS文件中：

// 确保DOM加载完成后再获取元素绑定事件
document.addEventListener('DOMContentLoaded', () => {
  const loginBtn = document.getElementById('loginSubmitBtn');
  loginBtn.addEventListener('click', () => {
    // 这里可以加你的登录校验逻辑，比如：
    // const username = document.getElementById('usernameInput').value;
    // const password = document.getElementById('passwordInput').value;
    // if(!username || !password) { alert('请输入账号密码'); return; }
    
    // 校验通过后执行跳转
    window.location.href = '你的目标页面路径';
  });
});

额外适配登录场景的小技巧：如果希望用户登录成功后不能通过浏览器后退按钮回到登录页，可以把跳转代码换成window.location.replace('你的目标页面路径')，该方法会替换当前页面的浏览历史记录，更符合登录流程的交互需求。

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