正文

点击按钮实现页面跳转的JS代码示例

/0 浏览量
0330

当你在网页上点击一个按钮，想要实现页面跳转到另一个页面，你可以使用JavaScript来完成这个功能。下面，我将提供一个简单的JavaScript代码示例，展示如何实现点击按钮进行页面跳转。

基础HTML结构

首先，我们需要一个HTML按钮元素，并为它设置一个ID，这样JavaScript可以轻松地找到它。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面跳转示例</title>
</head>
<body>

<!-- 按钮元素 -->
<button id="jumpButton">点击我跳转页面</button>

<script>
// JavaScript代码将放在这里
</script>

</body>
</html>

JavaScript代码

接下来，在<script>标签内，我们将编写JavaScript代码。当按钮被点击时，这段代码将会执行，并触发页面跳转。

document.getElementById('jumpButton').addEventListener('click', function() {
    window.location.href = 'https://www.example.com';
});

代码解释

  • document.getElementById('jumpButton')：这是获取页面中ID为jumpButton的元素，即我们的按钮。
  • .addEventListener('click', function() {...})：为按钮添加一个点击事件监听器，当按钮被点击时，执行其中的函数。
  • window.location.href = 'https://www.example.com';：设置window.location.href属性为新的URL，这将导致浏览器导航到指定的URL。

完整示例

将上面的HTML和JavaScript代码结合起来，就得到了一个完整的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面跳转示例</title>
</head>
<body>

<!-- 按钮元素 -->
<button id="jumpButton">点击我跳转页面</button>

<script>
// 获取按钮元素并为点击事件添加监听器
document.getElementById('jumpButton').addEventListener('click', function() {
    // 设置跳转目标URL
    window.location.href = 'https://www.example.com';
});
</script>

</body>
</html>

当你运行这个HTML文件时，点击按钮将会触发页面跳转至指定的URL。你可以将https://www.example.com替换为你希望跳转到的任何网页地址。

-- 展开阅读全文 --