html如何实现点击按钮跳转页面

html如何实现点击按钮跳转页面,第1张

1、首先,我们新建一个带有button按钮的页面,在Dreamweaver中打开这个页面。

2、button按钮不能直接添加herf属性,我们可以通过button的onClick事件来实现页面的跳转

3、可以直接在onclick事件上添加动作实现页面跳转,也可以让onClick触发函数实现页面跳转,如下图所示。

4、还可以写一个click函数,来触发页面跳转。这就需要我们获取到这个button,可以给button一个Id了,如下图所示。

如果不想被看到地址栏信息的改变,要利用frameset或者iframe框架来做链接才行,当然利用Ajax好像也可以实现,不过对ajax不熟悉,但是如果是用iframe之类的话,可以这样:
<html>
<script language="javascript" src="" type="text/javascript"></script>
<body>
<a onclick="javascript:aa()" target="iframeA" />aa</a>
<iframe name="iframeA" id="iframeA" width="800" frameborder="0">
</body>
上面的<script>是导入的,防止被人查看javascript代码
其中
function aa()
{windowlocationhref="";}
然后再加个javascript特效隐藏掉代码,防止被人查看源代码就可以了
</html>

在网页中button按钮不具备a标签的属性,如果要给button 按钮增加跳转事件可以在的确onclick事件上点击跳转js来实现。

1本地跳转

function add(){

windowlocationhref="adddomethod=add"; //你需要跳转的地址

}

function add(){

windowlocationhref="adddomethod=add"; //你需要跳转的地址

}

2打开新页面

function add(){

windowlocation("adddomethod=add"); //你需要跳转的地址

}

function add(){

windowlocation("adddomethod=add"); //你需要跳转的地址

}

3、JSP页面调用

<input
name="" type="button" value="增 加" onClick="javascript:add()" /> 
<input
name="" type="button" value="增 加" onClick="javascript:add()" />

在网页中button按钮不具备a标签的属性,如果要给button 按钮增加跳转事件可以在的确onclick事件上点击跳转js来实现。
1本地跳转
function add(){
windowlocationhref="adddomethod=add"; //你需要跳转的地址
}
function add(){
windowlocationhref="adddomethod=add"; //你需要跳转的地址
}
2打开新页面
function add(){
windowlocation("adddomethod=add"); //你需要跳转的地址
}
function add(){
windowlocation("adddomethod=add"); //你需要跳转的地址
}
3、JSP页面调用
<input name="" type="button" value="增 加" onClick="javascript:add()" /> <input name="" type="button" value="增 加" onClick="javascript:add()" />

给你需要跳转的页面添加onclick事件,会在对象被点击时发生。
方法一:onclick="javascript:windowlocationhref='页面路径'"
方法二:onclick="location='页面路径'"
方法三:onclick="windowlocationhref='页面路径’”

windowlocationhref='${ctx}/addInterview参数名1=参数值1&参数名2=参数值2'

这样就可以把你想要的参数传过图二


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/10229412.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-06
下一篇 2023-05-06

发表评论

登录后才能评论

评论列表(0条)

保存