html页面点击按钮实现页面跳转功能

  发布时间:2023-07-13 16:44:18   作者:Hi~晴天大圣   我要评论
这篇文章主要介绍了html页面点击按钮实现页面跳转功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

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

方法1、在button标签外嵌套一个a标签,利用超链接进行跳转;

<a href="https://www.baidu.com/" target="_blank">
?<button>进入baidu首页</button>
</a>

方法2、在button标签中添加οnclick="window.location.href=‘页面url’"代码,使用onclick事件进行跳转。

<button onclick="window.location.href = 'https://www.baidu.com/' target="_blank"">进入baidu首页</button>

html页面自动跳转方法

1.使用meta元素

<meta http-equiv="refresh" content="5;url=hello.html">

http-equiv=“refresh” 是刷新页面,5秒后执行刷新操作,url是跳转的目的页面地址。

<meta http-equiv="refresh" content="5">

这行代码的意思是只刷新,不跳转。

2.使用script代码

立即跳转到hello.html页面。

<script type="text/javascript">
?? ?window.location.href = 'hello.html';
</script>

或者

<script language="javascript">
?? ?location.replace("http://www.baidu.com/");
</script>

5秒后跳转到hello.html页面。

<script type="text/javascript">
?? ?setTimeout("window.location.href = 'hello.html'", 5000);
</script>

3.判断是否手机端

<script type="text/javascript">
var wapurl = window.location.pathname;?
if
?? ?(/Android|webOS|iPhone|iPod|BlackBerry|Windows CE|Windows Phone/i.test(navigator.userAgent))
{if
?? ?(window.location.href.toLowerCase().indexOf("?pc")<0)
{try
?? ?{window.location.href="/?wap"+wapurl}
?? ?catch(e){}}
?? ?}
</script>

到此这篇关于html页面点击按钮实现页面跳转的文章就介绍到这了,更多相关html点击按钮跳转页面内容请搜索程序员之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持程序员之家!

相关文章

最新评论

?


http://www.vxiaotou.com