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

灿烂阳光666

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

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

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

复制代码

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

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

复制代码

html页面自动跳转方法

1.使用meta元素

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

复制代码

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

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

复制代码

这行代码的意思是只刷新，不跳转。
2.使用script代码

立即跳转到hello.html页面。

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

复制代码

或者

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

复制代码

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

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

复制代码

3.判断是否手机端

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

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

火绒草

我们一起努力，共同解决问题吧。

天下游戏汇

每日一回

快乐的彩虹888

我不确定这个信息的准确性，请再确认一下

寒千叶

谢谢你分享这个信息

季媛

说得太好了，完全同意！

达瓦卓玛

让我们一起努力

Mr.小凡.

能给个链接吗？我想深入了解一下。

VIVIANV双鱼

能给个链接吗？我想深入了解一下。

穿着裤衩去吹水

顶一个，观点非常中肯！