HTML/Xhtml
主页 > 网页 > HTML/Xhtml >

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

2023-07-13 | 佚名 | 点击:

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

1

2

3

<a href="https://www.baidu.com/" target="_blank">

 <button>进入baidu首页</button>

</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

2

3

<script type="text/javascript">

    window.location.href = 'hello.html';

</script>

或者

1

2

3

<script language="javascript">

    location.replace("http://www.baidu.com/");

</script>

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

1

2

3

<script type="text/javascript">

    setTimeout("window.location.href = 'hello.html'", 5000);

</script>

3.判断是否手机端

1

2

3

4

5

6

7

8

9

10

11

<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>

原文链接:
相关文章
最新更新