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>

时间: 2024-09-30 11:21:31

js点击button按钮跳转到页面代码的相关文章

js 弹出提示信息,并跳转指定页面代码分享

using System.Web; /// <summary>/// 客户端脚本输出/// </summary>public class JsHelper{    /// <summary>    /// 弹出信息,并跳转指定页面.    /// </summary>    public static void AlertAndRedirect(string message, string toURL)    {        string js = &qu

使用selenium+python;在页面A点击一个按钮跳转到页面B,页面A没有关闭,浏览器打开了一个B,切换窗口定位页面B的元素

转自:http://blog.csdn.net/hhabc123456789/article/details/21862139 # -*- coding:cp936 -*-__author__ = 'Administrator' import unittest,time,refrom selenium import webdriver class Untitled(unittest.TestCase):    def setUp(self):        self.driver = webdr

vue中,点击button按钮后,页面上的input框自动聚焦

需求:点击button按钮,录入成功后,页面上的input框自动聚焦,快速进行下一次录入,提高效率 开始尝试了几种方法都没有成功 一.首先想到的用vue指令 v-focus,然而没有成功 <Input v-model="book.isbnOrIssn" @change.native="_getIsbn" @blur="_getIsbn" :disabled="snDisabled" v-focus placeholder

问题:asp.net 点击button按钮调到页面顶部;结果:asp.net点击一个按钮,使页面跳转到本面页上的指定位置

asp.net点击一个按钮,使页面跳转到本面页上的指定位置 (2011-04-19 16:46:51) 转载▼ 标签: it   最近在做一个项目. 用到标题所说的功能. 实现方法: 1.在aspx中添加一个javascript: <script language="javascript" type="text/javascript">         <!-- function autoclick()         {            

页面点击Button按钮弹出登陆注册框(含短信验证功能)

1 <div class="login-hidd"></div> 2 <div class="login-wrap"> 3 <div class="login-cont"> 4 <img id="login-img-close" src="/views/image/close08.png" alt="登陆" title="&

C++ windows图形界面,点击Button按钮通过openFileDialog控件选择文件

一直没用C++写过图形界面,之前用C#写很简单啊,没想到今天用C++还是有点不爽! 第一个问题,就是点击一个按钮button,选择文件,非文件夹,是文件,就是图片之类的东西! 首先,可以在界面中拖一个openFileDialog控件,控件名字就叫openFileDialog1,如图所示 也可以在Button的点击事件里new一个openFileDialog控件也可以! 然后,就是在button点击事件里,写下相应的代码就可以了: private: System::Void button1_Cli

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

我们在制作移动端网页的时候,经常会遇到这样一个问题,如何点击一个"复制"按钮,把一串文字复制到手机剪贴板,如上图所示. 看了网上的一些方法后,感觉那些方法都太复杂,有点要用插件,有的需要安装flash,但是这些对于手机等移动设备都不太合适,那么有没有一个简单点的办法呢? 今天,我们就来介绍一个简单实用的好方法: ①首先,我们把需要复制的部分 做成一个readonly的input, ②复制按钮的id 我这里设置成:js-copy-text, ③js如下: <script> $

点击button按钮后界面不自动刷新

问题: 我使用的button标签,在 标签中没有使用ruant=“server”的属性,但是在点击button时,界面还是会刷新 解决方式: 由于界面中含有form标签,而button标签的默认type是submit.所以相当于进行了form提交操作.为了是界面不刷新只需要在botton标签中加入type=“button”即可.

Android点击Button按钮的四种事件监听方法总结

首先我们在activity_main.xml里面先定义一个Button空间 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="m