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

这篇具有很好参考价值的文章主要介绍了前端页面跳转的3种方法(HTML示例)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、onclick跳转

1. 设置window的location.href属性

2. 调用window的open方法

二、a标签跳转文章来源地址https://www.toymoban.com/news/detail-512995.html

<!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>

到了这里,关于前端页面跳转的3种方法(HTML示例)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • html页面自动跳转方法

    1.使用meta元素 http-equiv=“refresh” 是刷新页面,5秒后执行刷新操作,url是跳转的目的页面地址。 这行代码的意思是只刷新,不跳转。 2.使用script代码 立即跳转到hello.html页面。 或者 5秒后跳转到hello.html页面。 3.判断是否手机端

    2024年02月12日
    浏览(39)
  • uniapp页面跳转的几种方式 以及举例(2)

    又来混时长 嫖流量卷了 保留当前页面,跳转到应用内的某个页面,使用 uni.navigateBack 可以返回到原页面。   关闭当前页面,跳转到应用内的某个页面。   关闭所有页面,打开到应用内的某个页面。 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 关闭当前页面,返回上一

    2024年01月19日
    浏览(45)
  • SpringMVC的常用注解,参数传递以及页面跳转的使用

    目录 slf4j 常用注解 @RequestMapping @RequestParam @RequestBody @PathVariable 参数传递  首先在pom.xml配置文件中导入SLF4J的依赖 基础类型+String   复杂类型 @RequestParam @PathVariable @RequestBody  增删改查  返回值 void返回值  String返回值 model+String   页面跳转 --转发和重定向 SLF4J,简单日志门面

    2024年02月09日
    浏览(41)
  • 【SpringMVC】注解、参数传递、返回值和页面跳转的关键步骤

    目录 引言 一、常用注解 1.1.@RequestMapping 1.2.@RequestParam 1.3.@RequestBody 1.4.@RequestHeader 1.5.@PathVariable 二、参数传递 2.1.基础类型+String 2.2.复杂类型 2.3.@RequestParam 2.4.@PathVariable 2.5.@RequestBody 2.6.@RequestHeader 三、返回值 3.1.void 3.2.String 3.3.String+Model 3.4.ModelAndView 四、页面跳转 4.1.转发forw

    2024年02月09日
    浏览(36)
  • 4种方法实现html 页面内锚点定位及跳转

    不知道你有没有遇到这样的需求:锚点定位?进入页面某个元素需要出现在可视区?…这一类的需求归根结底就是处理元素与可视区域的关系。我接触了很多前端小伙伴,实现的方式有各种各样的,比如使用 scrollTop、监听滚动等等,这也是很多小伙伴第一个想到的。 今天我

    2024年02月11日
    浏览(32)
  • Spring MVC入门必读:注解、参数传递、返回值和页面跳转的关键步骤

    目录 引言 一、常用注解 1.1.@RequestMapping 1.2.@RequestParam 1.3.@RequestBody 1.4.@RequestHeader 1.5.@PathVariable 二、参数传递 2.1.基础类型+String 2.2.复杂类型 2.3.@RequestParam 2.4.@PathVariable 2.5.@RequestBody 2.6.@RequestHeader 三、返回值 3.1.void 3.2.String 3.3.String+Model 3.4.ModelAndView 四、页面跳转 4.1.转发forw

    2024年02月09日
    浏览(35)
  • vue实现路由跳转的方法

            router-link是vue中提供的一种跳转页面的相关方式 1.其中router-link中使用v-bind绑定了一个对象(其实也可以理解成路由跳转的目的地) 2.其中有两种跳转方法,1-利用你的路由名字来进行跳转(推荐跳转的方法)  2-利用路由的path来进行跳转,但使用这种方法来进行跳转有

    2024年02月09日
    浏览(42)
  • React Dva项目中路由跳转的方法

    接下来 我们来看看路由跳转 先打开 我们Dva项目 然后我们需要在routes 下创建一个自己的路由,如果您尚未掌握在Dva项目中创建路由,可以参考我的文章 React 在Dva项目中修改路由配置,并创建一个自己的路由 然后 我的项目有两个路由 router.js代码如下 一个 / 一个 /ProductPage 其

    2024年02月16日
    浏览(33)
  • uniapp -- 关于uni.navigateTo方法无法跳转的解决方法

    今天做页面跳转的时候遇到了一个问题,uni.navigateTo 方法不是万能的 🤔 我的需求是在一个component目录下的一个组件中点击遍历出来的组件进入另一个组件,我觉得有点绕,所以我把将要跳转的详情页放到了pages目录下并注册了页面(没有配置tabbar) 没错,就是这张图,我想

    2024年02月11日
    浏览(46)
  • Taro + vue3 + js + nutUI 框架中自定义tabbar的组件封装以及页面跳转的逻辑

    1.需求:   在H5 中需要封装一个自定义的tabbar 菜单跳转 通过nut-ui 进行二次封装 2. 注意点   H5 中原生的tabbar 在ios 中会出现问题 所以进行 封装tabbar 3. 代码操作 首先全部的代码  4.解析 tabList: 菜单的内容数组  根据自己菜单的数量 来决定 const tabList = reactivemenu[]([     {    

    2024年04月17日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包