zoukankan      html  css  js  c++  java
  • js点击button按钮跳转到页面代码

     

    www.111cn.net 编辑:smoke 来源:转载
    在网页中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>

  • 相关阅读:
    关于 android studio 3.2打开后一直下载中,最后还失败了 的解决方法
    Android app退出(AppManager对Activity的管理)
    关于 android studio 找错
    webpack3 版本问题
    phpstorm中webpack快速执行脚本转换scss至css
    v-bind:class失效问题
    php(2)—基础补充
    phpstorm配置Apache服务器
    php(1)—基础
    中醫學習
  • 原文地址:https://www.cnblogs.com/lizhenlin/p/5628605.html
Copyright © 2011-2022 走看看