当我们需要在网页中添加按钮来执行某些操作时，有时候也希望这个按钮可以直接跳转到另一个页面。一种常见的做法是将该按钮包裹在<a href ...>标签中，并给该标签指定跳转链接。但是有没有其他更好的办法呢？本文将介绍两种方法来实现这一目的，分别是使用JavaScript实现和HTML5中的新属性。
方法一：使用JavaScript
我们可以通过JavaScript来动态地修改按钮的点击事件，从而实现直接跳转到另一个页面的效果。具体步骤如下：
- 给按钮设置一个id属性，以便于在JavaScript中获取它的引用。
<button id="myButton">Go to Another Page</button>
- 在JavaScript中获取该按钮的引用，并为它添加一个点击事件处理函数。
const myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
window.location.href = "https://www.example.com";
});- 在事件处理函数中，将当前窗口的location.href属性设置为要跳转的链接。
这样，当用户点击该按钮时，就会直接跳转到"https://www.example.com"这个页面。
方法二：使用HTML5中的新属性
除了使用JavaScript之外，HTML5中还提供了一种简单的方法来使<button>元素直接跳转到另一个页面，即使用新的formaction属性。具体步骤如下：
- 在<form>标签中添加一个<button>元素，并为它设置formaction属性。
<form> <button type="submit" formaction="https://www.example.com">Go to Another Page</button> </form>
- 给该<button>元素指定type="submit"属性，以便于在不使用JavaScript的情况下将其作为表单提交按钮来使用。
这样，在用户点击该按钮时，就会直接跳转到"https://www.example.com"这个页面。
需要注意的是，使用formaction属性的方法要求<button>元素必须位于<form>标签内部，并且要给该<button>元素指定type="submit"属性。
总结
以上就是两种实现使<button>元素链接到另一个页面的方法。使用JavaScript可以更加灵活地控制跳转行为，但需要编写一些额外的代码；而使用HTML5中的新属性则更加简单，但要求<button>元素必须放置在<form>标签内部，并且需要指定type="submit"属性。根据实际需求选择合适的方法即可。
示例代码：https://codepen.io/anon/pen/wvMqVXO
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27191