js点击button按钮跳转到另一个新页面

 更新时间:2014年10月10日 17:46:18   投稿:whsnow  
点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎么做到呢?可以使用onclick=window.location=新页面来实现

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

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

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

代码如下

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

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

代码如下

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

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

代码如下

<input type="submit" name="Submit" value="同意" onclick=window.open(https://www.jb51.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>

相关文章

  • 微信小程序实现五星评价功能

    微信小程序实现五星评价功能

    这篇文章主要为大家详细介绍了微信小程序实现五星评价功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • JS 箭头函数的this指向详解

    JS 箭头函数的this指向详解

    这篇文章主要给大家介绍了关JS 箭头函数的this指向,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • 预防网页挂马的方法总结

    预防网页挂马的方法总结

    这篇文章主要介绍了预防网页挂马的方法总结的相关资料,这里详细整理了具体方法,和如何实现,需要的朋友可以参考下
    2016-11-11
  • 基于JavaScript实现智能右键菜单

    基于JavaScript实现智能右键菜单

    这篇文章主要介绍了基于JavaScript实现智能右键菜单的相关资料,需要的朋友可以参考下
    2016-03-03
  • Angularjs结合Bootstrap制作的一个TODO List

    Angularjs结合Bootstrap制作的一个TODO List

    这篇文章主要介绍了Angularjs结合Bootstrap制作的一个TODO List 的相关资料,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 简单谈谈JavaScript寄生式组合继承

    简单谈谈JavaScript寄生式组合继承

    寄生组合式继承,是集寄生式继承和组合继承的有点与一身,主要是通过借用构造函数来继承属性,通过原型链的混成形式来继承方法,这篇文章主要给大家介绍了关于JavaScript寄生式组合继承的相关资料,需要的朋友可以参考下
    2021-08-08
  • jsp 网站引入外部css或者js失效问题解决

    jsp 网站引入外部css或者js失效问题解决

    这篇文章主要介绍了jsp 网站引入外部css或者js失效问题解决的相关资料,需要的朋友可以参考下
    2016-10-10
  • 如何在uniapp项目中使用mqtt

    如何在uniapp项目中使用mqtt

    本文给大家分享uniapp中引入mqtt的全过程,在uniapp项目根目录下分别运行安装mqtt和uuid的命令行,因为后面会用uuid生成mqtt的clientId,文中给大家介绍mqtt和uuid安装过程,感兴趣的朋友跟随小编一起学习下吧
    2021-05-05
  • 详解TypeScript使用及类型声明文件

    详解TypeScript使用及类型声明文件

    声明文件是以.d.ts为后缀的文件,开发者在声明文件中编写类型声明,TypeScript根据声明文件的内容进行类型检查,这篇文章主要介绍了TypeScript使用及类型声明文件的相关知识,需要的朋友可以参考下
    2022-06-06
  • JavaScript中实现PHP的打乱数组函数shuffle实例

    JavaScript中实现PHP的打乱数组函数shuffle实例

    这篇文章主要介绍了JavaScript中实现PHP的打乱数组函数shuffle实例,本文用2种方法实现了类似PHP的打乱数组函数shuffle函数,需要的朋友可以参考下
    2014-10-10

最新评论