js点击button按钮跳转到页面代码 - 山涧清泉

sjqq 2021-11-19 原文


js点击button按钮跳转到页面代码

在网页中button按钮不具备a标签的属性了,如果我们要给button 按钮增加跳转事件我们可以在它的确onclick事件上点击跳转js来实现,下面我来给大家介绍一些常用的方法。
 

点击按钮怎么跳转到另外一个页面呢?我们在网站制作中可能是需要的,因为有时我们需要做这样的效果,尤其是将按钮做成一个图片,而点击图片要跳转到新的页面时,怎么做到呢?

这样的效果可以:onclick=”window.location=’新页面’” 来实现。

1.在原来的窗体中直接跳转用

 代码如下 复制代码

window.location.href=”你所要跳转的页面”;

2、在新窗体中打开页面用:

 代码如下 复制代码

window.open(\’你所要跳转的页面\’);

window.history.back(-1);返回上一页

代码是:

 代码如下 复制代码

<input type=”submit” name=”Submit” value=”同意” onclick=window.open(http://www.111cn.net/)>

如果要在点击按钮提交时验证输入款是否填入了内容,要怎么做呢?当用户名输入或者其它的为空的时候,点击按钮不提交,可以按下列的方法做。

 代码如下 复制代码

<input type=”submit” name=”submit” onclick=”open()”>

<script language=javascript> fuction open(){

if(!document.form_name.username.value) {

alert(“请输入用户名!”); document.form_name.username.focus(); return false;

}else document.form_name.action=”aaa.htm”;

} </script>

这样的话,当空值时,点击按钮还是不会跳转到另外的页面呢?这样就达到了效果了。

 JS跳转页面参考代码

 代码如下 复制代码

第一种: <script language=”javascript” type=”text/javascript”> window.location.href=”login.jsp?backurl=”+window.location.href; </script> 第二种: <script language=”javascript”> alert(“返回”); window.history.back(-1); </script> 第三种: <script language=”javascript”> window.navigate(“top.jsp”); </script> 第四种: <script language=”JavaScript”> self.location=’top.htm’; </script> 第五种: <script language=”javascript”> alert(“非法访问!”); top.location=’xx.jsp’; </script>

=====javascript中弹出选择框跳转到其他页面===== <script language=”javascript”> <!– function logout()…{ if (confirm(“你确定要注销身份吗?是-选择确定,否-选择取消”))…{ window.location.href=”logout.asp?act=logout” } } –> </script>   =====javascript中弹出提示框跳转到其他页面===== <script language=”javascript”> <!– function logout()…{ alert(“你确定要注销身份吗?”); window.location.href=”logout.asp?act=logout” } –> </script>

发表于
2018-01-29 16:00 
山涧清泉 
阅读(4440
评论(0
编辑 
收藏 
举报

 

版权声明:本文为sjqq原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/sjqq/p/8377775.html

js点击button按钮跳转到页面代码 - 山涧清泉的更多相关文章

  1. MAC系统如何远程连接windows – 巴顿的博客

    MAC系统如何远程连接windows 1.下载软件并安装http://www.microsoft.com/zh […]...

  2. 从壹开始前后端分离【 .NET Core2.0 Api + Vue 3.0 + AOP + 分布式】框架之九 || 依赖注入IoC学习 + AOP界面编程初探

    代码已上传Github,文末有地址   说接上文,上回说到了《从壹开始前后端分离【 .NET Core2.0 […]...

  3. 折腾:如何让你的老电脑快起来 – sting feng

    如何让你的老电脑快起来 好多年没升级电脑了。我现在在家里用的电脑是2003年买的IBM T40 (奔腾M 1. […]...

  4. React 为什么要把事件挂载到 document 上 & 事件机制源码分析

    前言 我们都知道 React 组件绑定事件的本质是代理到 document 上,然而面试被问到,为什么要这么设 […]...

  5. 打印机连接电脑打印与扫描(使用) – 无泪人

    打印机连接电脑打印与扫描(使用) 1打印机安装驱动我这里打印机型号是富士施乐M268dw,我公司打印机ip是: […]...

  6. 如何查看外网IP地址 – pamge_ly

    如何查看外网IP地址 转自:http://jingyan.baidu.com/article/e52e3615 […]...

  7. 杭电OJ 2054 A == B ?

        第一眼看到这题,就觉得应该没那么简单,肯定有坑,但我还是忍不住去试了试直接判断相等,结果可想而知 […]...

  8. 如何快速入门Windows编程 – 麦哲思科技

    如何快速入门Windows编程 摘要:不少朋友向我征询学习Windows界面编程的方法,每一次,我总毫不犹豫的 […]...

随机推荐

  1. Python中 pywt 小波分析库中的一些基本使用方法

    尺度函数 : scaling function (在一些文档中又称为父函数 father wavelet )小 […]...

  2. # 组合数学-组合数+lacus定理

    数论-组合数+lacus定理 目录 数论-组合数+lacus定理 组合数计算 lacus定理-大组合数取模 组 […]...

  3. Linux–Ubuntu12.04下安装JDK

    前言   在Ubuntu中安装JDK的方法非常的多,网上现在介绍的很多方法,都不是很清楚,对于初学者,很多都不 […]...

  4. java分布式通信系统(J2EE分布式服务器架构)

    http://blog.csdn.net/tannafe/article/details/6123412 一、 […]...

  5. [Caffe]史上最全的caffe安装过程

    Linux下的GPU版Caffe安装方法 系统环境:Ubuntu 14.04LTS + NV TitanX 1 […]...

  6. 低代码在这些方面充满优势

    低代码开发平台通过可视化方式快速搭建各种应用系统的开发平台使开发人员无需从头开始编码,对于开发人员这是低代码的 […]...

  7. 最新迅雷iOS下载beta版2020,内测企业证书版下载安装

    近期ios版的迅雷失效较为普遍,安卓版的下载地址可以用,但苹果版的官方链接已经挂了。对于失效的的缘故,相信大家 […]...

  8. RSA算法详解与练习

    1. 什么是RSA 2. RSA算法描述 2.1 产生公私密钥对 2.2 RSA加密 2.3 RSA解密 2. […]...

展开目录

目录导航