前端页面跳转的3种方法(HTML示例)

最新推荐文章于 2024-05-13 18:12:11 发布

西晋的no1

最新推荐文章于 2024-05-13 18:12:11 发布

阅读量1.5w

点赞数 2

分类专栏：前端(html+css+js)知识点杂烩文章标签：前端 html Powered by 金山文档

本文链接：https://blog.csdn.net/xijinno1/article/details/128858735

版权

前端(html+css+js)知识点杂烩专栏收录该内容

70 篇文章 11 订阅

订阅专栏

一、onclick跳转

1. 设置window的location.href属性

2. 调用window的open方法

二、a标签跳转

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title>Hello world</title>
</head>
<body>
  <h1>我的第一个标题</h1><br />
  <!--  一、onclick跳转：1.设置window的location.href属性 -->
   <span onclick="location='https://blog.csdn.net/xijinno1?type=blog'">点击在当前页打开csdn主页-方法1-1</span><br />
  <br />
  <span onclick="window.location.href='https://blog.csdn.net/xijinno1?type=blog'">点击在当前页打开csdn主页-方法1-2</span><br />
  <br />
  <br />
  <br />
  <!--  一、onclick跳转：2.调用window的open方法 -->
   <span onclick="window.open('https://blog.csdn.net/xijinno1?type=blog','_self')">点击在当前页打开csdn主页-方法2-1</span><br />
  <br />
  <span onclick="window.open('https://blog.csdn.net/xijinno1?type=blog','_blank')">点击在当前页打开csdn主页-方法2-2</span><br />
  <br />
  <br />
  <br />
  <!--  二、a标签跳转 -->
   <!-- target属性默认为_self，此处可省略 -->
   <a href="https://blog.csdn.net/xijinno1?type=blog" target="_self">点击在当前页打开csdn主页-方法3-1</a><br />
  <br />
  <a href="https://blog.csdn.net/xijinno1?type=blog" target="_blank">点击在当前页打开csdn主页-方法3-2</a><br />
  <br />
  <br />
  <br />
</body>
</html>