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

投稿:whsnow 字体:[增加 减小] 类型:转载 时间:2014-10-10我要评论

点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎么做到呢?可以使用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(http://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>

PHP——0128练习相关2——js点击button按钮跳转到另一个新页面的更多相关文章

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

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

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

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

  3. 如何获取ul 中li选中的值点击button按钮跳转链接

    <ul id="parent"> <li></li> <li></li> <li></li> & ...

  4. 用 JS 点击左右按钮 使图片切换 - 最精简版-ljx2380000-ChinaUnix博客

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  5. RFS_点击button按钮之后,RFS出现卡死的问题

    [html代码] <html> <head> <title> 主窗口 </title> </head> <body> <d ...

  6. 《笔记篇》非JS方法跳转到一个新页面,主要防止客户端禁止浏览器JS以后的跳转异常

    用非JS方法打开一个新页面,主要防止客户端禁止浏览器JS以后的跳转失效 <meta http-equiv="refresh" content="0; url=htt ...

  7. JS解析Json 数据并跳转到一个新页面,取消A 标签跳转

    JS解析Json 数据并跳转到一个新页面,代码如下 $.getJSON("http://api.cn.abb.com/common/api/staff/employee/" + o ...

  8. JS 点击复制按钮 将文字复制到手机剪贴板

    我们在制作移动端网页的时候,经常会遇到这样一个问题,如何点击一个"复制"按钮,把一串文字复制到手机剪贴板,如上图所示. 看了网上的一些方法后,感觉那些方法都太复杂,有点要用插件,有 ...

  9. 项目遇到的小问题(关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答)

     第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...

随机推荐

  1. 性能调优的Windows窗体DataGridView控件

    性能调优的Windows窗体DataGridView控件 . 净框架4.5     在处理大量数据时, DataGridView 控制可以消耗大量的内存开销,除非你仔细地使用它. 在客户有限的内存,你 ...

  2. python的加密模块(md5,sha,crypt)学习

    python的加密模块(md5,sha,crypt)学习 命令行使用python MD5: yinguicai@Cpl-IBP-Product:~/data/work/svn/v1.4.0_dev/A ...

  3. 导入exce表格中的数据l到数据库

    因为我的项目是JavaWeb的,所有是通过浏览器导入数据库到服务器端的数据库,这里我们采用struts来帮助我们完成. 1:首先定义一个文件上传的jsp页面.把我们的数据先上传到服务器端. <f ...

  4. Android高手进阶篇4-实现侧滑菜单框架,一分钟集成到项目中

    先来看下面的这张效果图: 上面这张效果图是百度影音的,现在在Android上很流行,最初是由facebook自己实现的,而后各大应用有跟风之势,那么这种侧滑效果是如何实现的呢? 网上现在这种侧滑菜单的 ...

  5. Jquery重新学习之八[Ajax运用总结B]

    上一篇简单介绍普通javascript以及Jquery的AJAX方法,其中Jquery.ajax()是功能比较强悍的底层方法,可以更多地关注实现过程中的细节:除Jquery.ajax()方法外,Jqu ...

  6. vue的全家桶

    自定义指令 <div v-demo="{ color: 'white', text: 'hello!' }"></div> Vue.directive('d ...

  7. MVC4怎样在cshtml的引号内添加变量?

    @{;} @foreach (var item in Model) { i++; <tr> <td style="text-align:center">@i ...

  8. potplayer 网页调用potplayer播放本地视频

      网页调用potplayer播放本地视频 CreateTime--2018年1月3日10:36:24 Author:Marydon 源码展示: <!DOCTYPE html> <h ...

  9. java 判断日期是否是节假日

    1.新建一个excel命名为“节假日.xls”存放节假日,模板格式如下 2.判断是否是节假日的类 工作日返回true ,休息日返回false. 需要引用poi-bin-3.9包,包放在博客文件中 im ...

  10. Sphinx高亮显示关键字

    选取程序中使用的一部分代码: public function buildExcerptRows($ids) { $options = array( 'before_match' => '< ...