首页 > 软件开发 > HTML >

jquery跳转页面的方法

来源:互联网 2023-03-16 19:10:33 505

Jquery是一个前端插件库,很多前端开发的都在使用这个库,可以大大减少我们的前端代码。nJa办公区 - 实用经验教程分享!

用Jquery来跳转页面,你知道怎么写相关代码吗?下面我们来看下。nJa办公区 - 实用经验教程分享!

方法/步骤

  • 1

    使用Jquery来写JS脚本代码,所以需要在页面里先引入脚本库文件。nJa办公区 - 实用经验教程分享!

    jquery跳转页面的方法nJa办公区 - 实用经验教程分享!

  • 2

    html很简单,一个按钮,用来触发跳转的,并且注意的是当前页面是叫‘页面A’的。nJa办公区 - 实用经验教程分享!

    jquery跳转页面的方法nJa办公区 - 实用经验教程分享!

  • 3

    然后编写JS脚本逻辑,为跳转按钮添加一个点击事件。nJa办公区 - 实用经验教程分享!

    jquery跳转页面的方法nJa办公区 - 实用经验教程分享!

  • 4

    我们知道在原生的js里,我们做跳转是用window对象里的location属性来处理的,window.location.href = “abc.html"nJa办公区 - 实用经验教程分享!

    jquery跳转页面的方法nJa办公区 - 实用经验教程分享!

  • 5

    既然有对象,有属性,我们用jquery来也很清楚怎么写代码了。nJa办公区 - 实用经验教程分享!

    通过jquery操作location对象,并调用attr方法,把href属性赋值为新的url地址就行了,代码如图。nJa办公区 - 实用经验教程分享!

    jquery跳转页面的方法nJa办公区 - 实用经验教程分享!

  • 6

    运行页面,点击上面的‘跳转’按钮。nJa办公区 - 实用经验教程分享!

    (注意现在是在页面A里)nJa办公区 - 实用经验教程分享!

    jquery跳转页面的方法nJa办公区 - 实用经验教程分享!

  • 6相关内容未经许可获取自百度经验
  • 7

    点击后,就成功跳转到新的页面里了,(页面B)nJa办公区 - 实用经验教程分享!

    jquery跳转页面的方法nJa办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!nJa办公区 - 实用经验教程分享!


    标签: JQUERYHTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码