onclick html 运行另一个 html onclikc - Javascript (1)

📌 相关文章

📜 onclick html 运行另一个 html onclikc - Javascript (1)

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

Javascript中通过onclick事件运行另一个HTML页面

在Javascript中，我们可以使用onclick事件将一个HTML页面与另一个HTML页面相连接或者切换。下面是一个示例：

<!DOCTYPE html>
<html>
   <head>
      <title>页面1</title>
   </head>
   <body>
      <h1 onclick="location.href='页面2.html'">点击此处切换到页面2</h1>
   </body>
</html>

在上面的例子中，我们可以看到当用户在页面1中点击h1标签的时候，会通过onclick事件跳转到与当前页面相连的页面2.html。这个过程非常简单并且直接，因此无需添加任何Javascript代码。

然而，如果你希望使用Javascript来更灵活的控制页面跳转的过程，让页面过渡更加平滑和流畅，你可以使用以下代码：

<!DOCTYPE html>
<html>
   <head>
      <title>页面1</title>
   </head>
   <body>
      <h1 id="my-h1-tag">点击此处切换到页面2</h1>

      <script>
         document.getElementById("my-h1-tag").onclick = function() {
            window.location.href = "页面2.html";
         }
      </script>
   </body>
</html>

在这个例子里，我们给h1标签添加了一个id属性来获取DOM元素并且设置了一个Javascript onclick事件来使页面跳转。在这种情况下，我们可以使用window.location.href属性来指定我们想要跳转的地址。这个方法会更加灵活并且适应性更广。

同时，如果想要实现在新标签页中打开新的链接，可以使用以下JS代码：

document.getElementById("my-h1-tag").addEventListener('click', function() { 
    window.open('页面2.html', '_blank'); 
});

在上述代码中，我们添加了window.open()方法。通过这个方法来创建一个新的浏览器窗口来打开新的链接。

总之，在Javascript中使用onclick事件来切换HTML页面是非常简单而且实用的功能。通过以上的例子，相信你也已经掌握了这个知识点。