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


Posted in Javascript onOctober 10, 2014

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

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

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

代码如下

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

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

代码如下

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

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

代码如下

<input type="submit" name="Submit" value="同意" onclick=window.open(https://3water.com/)>

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

代码如下

<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>
Javascript 相关文章推荐
JavaScript 检测浏览器和操作系统的脚本
Dec 26 Javascript
JQuery select控件的相关操作实现代码
Sep 14 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
javascript打开word文档的方法
Apr 16 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
jQuery获取iframe的document对象的方法
Oct 10 #Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 #Javascript
一个js过滤空格的小函数
Oct 10 #Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 #Javascript
window.location 对象所包含的属性
Oct 10 #Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 #Javascript
JavaScript设计模式之外观模式实例
Oct 10 #Javascript
You might like
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
Vue中计算属性computed的示例解读
2017/07/26 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
Python中Django发送带图片和附件的邮件
2017/03/31 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
Python元字符的用法实例解析
2018/01/17 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
高山背包:High Sierra
2017/11/23 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
遇到的Mysql的面试题
2014/06/29 面试题
工程师岗位职责
2013/11/08 职场文书
小学生期末评语
2014/04/21 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang