HTML点击按钮button跳转页面的几种实现方法

HTML点击按钮button跳转页面的几种实现方法其实我比较喜欢第一种方法<buttononclick=”window.location.href=’../routeEdit/index.html'”type=”button”id=”add”>新增</button>方法一:在button标签中加上onclick属性,赋值为Javascript<inputtype=”button”name=”regi…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

其实我比较喜欢第一种方法

<button onclick="window.location.href='../routeEdit/index.html'" type="button" id="add">新增</button>

Jetbrains全家桶1年46,售后保障稳定

正文

方法一:在button标签中加上onclick属性,赋值为Javascript

<input type="button" onclick='location.href=("index.aspx")' />//在本页面打开
<input type="button" onclick='window.open("bedzhao.aspx")' />//打开新页面

<button onclick="window.location.href='../routeEdit/index.html'" type="button" id="add">新增</button>

方法二:触发一个函数跳转

<script>
    function jump(){ 
   
        window.location.href="http://blog.sina.com.cn/mleavs";
    }
</script>
<input type="button" value="我是一个按钮" οnclick=javascript:jump()>

方法三:a标签的超链接可以直接嵌套一个button

<a href="https://www.baidu.com/">
    <button>点我跳转到度娘!</button>
</a>

方法四:表单的action定向提交跳转

<from action="xx.html" method="post">
    <input type="bottom" value="按钮">
</from>

还有其他方法,有些方法一些浏览器可能会不支持。

结尾

我是圆圆,如果我的文章对你的学习成长有所帮助,欢迎 点 赞 ? 支持,您的 点 赞 ? 支持是我进行创作和分享的动力!

如果有问题可以留言评论或者私信我,我都会一一解答~笔芯?

参考

  • https://blog.csdn.net/tjh625/article/details/81235827
  • https://blog.csdn.net/weixin_44025103/article/details/90017593
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/203567.html原文链接:https://javaforall.net

(0)
上一篇 2025年8月13日 上午9:43
下一篇 2025年8月13日 上午10:15


相关推荐

  • echarts折线图详解

    echarts折线图详解一个使用 echarts 制作折线图的简单案例 常用修改都写在注释里了 如果不需要区域颜色 将其删掉即可 option nbsp nbsp nbsp title nbsp nbsp nbsp nbsp nbsp nbsp nbsp text 堆叠区域图 标题栏 nbsp nbsp nbsp nbsp nbsp nbsp tooltip 提示框 nbsp nbsp nbsp nbsp nbsp nbsp nbsp trigger axis 触发类型 nbsp nbsp nbsp nbsp nbsp nbsp nbsp axisPointer 坐标轴指示器配置项 nbsp nbsp nbsp nbsp nbsp

    2026年3月17日
    2
  • 导入pfx证书

    导入pfx证书打开MicrsoftManangeConsole,你可以按住“Windows+R”,并输入mmc,打开MMC界面。一:添加管理单元(snap-in)从File主菜单中选择“Add/RemoveSnap-in”,打开“AddorRemoveSnap-ins”对话框从左侧的“Availablesnap-ins”列表中选择Certificates,点击”Add>”,打开“Certificatessnap-in”对话框,选择“Computeraccount”:选择snap-

    2022年6月7日
    100
  • 初识Redfish

    初识Redfish目录第一章初识 Redfish 刚步入工作 正在学习 Redfish 规范 记录下来方便自己回看 也欢迎评论留言一起学习 共同进步 嘤嘤嘤 参考链接 redfish2 1 8 目录目录前言一 Redfish 是什么 二 使用步骤 1 引入库 2 创建一个 Redfish 对象 3 登录服务器 4 执行一个 Get 操作 5 运行截图 5 结果分析总结前言 IMPI 智能平台管理接口 它是一种嵌入式功能 同时也是工业标准 由英特尔与戴尔 惠普和 NEC 合作开发 可实现对服务器的远程控制 但是这种规范也有它的局限性 层出不

    2026年3月19日
    1
  • anaconda3运行ipynb文件_如何打开ipynb文件

    anaconda3运行ipynb文件_如何打开ipynb文件#1、在官网下安装Anaconda3#2、在Anaconda3下打开ipynb文件##(1)在开始菜单栏找到Anaconda3文件夹->单击【JupyterNotebook】##(2)

    2022年8月5日
    13
  • ureport2报表详细使用(一)-集成及配置

    ureport2报表详细使用(一)-集成及配置一 报表简介 UReport2 是一款基于架构在 Spring 之上纯 Java 的高性能报表引擎 通过迭代单元格可以实现任意复杂的中国式报表 在 UReport2 中 提供了全新的基于网页的报表设计器 可以在 Chrome Firefox 等各种主流浏览器运行 不支持 IE 使用 UReport2 打开浏览器即可完成各种复杂报表的设计制作 二 主体功能 UReport2 支持创建数据源 添加数据集 并对数据集进行函数 表达式处理 参考 数据处理 UReport2 支持对数据集形成可视化报表 包

    2025年10月13日
    6
  • fastjson和Apache报错解决整理,以及编译时minSdkVersion的值设定

    fastjson和Apache报错解决整理,以及编译时minSdkVersion的值设定

    2021年9月30日
    42

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号