📌  相关文章
📜  按钮单击导航到另一个页面角度 - Javascript(1)

📅  最后修改于: 2023-12-03 15:25:54.711000             🧑  作者: Mango

按钮单击导航到另一个页面

在网站开发中，经常需要在页面中设置多个按钮，以便用户在不同的页面间进行快速跳转。本文将介绍如何在Javascript中编写代码，通过按钮点击事件来实现页面跳转的功能。

HTML代码结构

在实现按钮跳转功能前，我们首先需要在HTML代码中添加两个目标页面。

<!DOCTYPE html>
<html>
<head>
	<title>按钮单击导航到另一个页面</title>
</head>
<body>
	<h1>跳转前的页面内容</h1>
	<button id="page1">跳转到页面1</button>
	<button id="page2">跳转到页面2</button>
</body>
</html>

此处我们添加了两个按钮，分别用于跳转到“页面1”和“页面2”。

Javascript代码实现

在Javascript中，我们可以通过window.location.href属性来完成页面跳转。在按钮点击事件中，通过修改该属性来跳转到目标页面。

<script>
document.getElementById("page1").onclick = function(){
	window.location.href = "page1.html";
};
document.getElementById("page2").onclick = function(){
	window.location.href = "page2.html";
};
</script>

在上述代码中，我们为页面中的两个按钮绑定了相应的点击事件，当用户点击其中一个按钮时，会执行相应的跳转操作。例如，当用户点击“跳转到页面1”的按钮时，就会跳转到page1.html文件：

window.location.href = "page1.html";
总结

通过上述代码，我们可以通过Javascript实现按钮单击导航到另一个页面的功能。我们只需要在HTML代码中添加目标页面，在Javascript代码中绑定按钮点击事件，便可以实现页面跳转的功能。

参考文献