Home >Web Front-end >HTML Tutorial >How to implement page jump in html

How to implement page jump in html

coldplay.xixi
coldplay.xixiOriginal
2021-04-12 14:53:1739536browse

How to implement page jump in html: 1. Set jump time and page through meta; 2. Jump directly using a tag; 3. Jump through javascript, the code is [window.location. href='index.html'].

How to implement page jump in html

The operating environment of this tutorial: windows7 system, html5 version, DELL G3 computer.

How to implement page jump in html:

1. Use meta to jump in html. You can set the jump time and page through meta.

<head>
<!--只是刷新不跳转到其他页面 -->
<meta http-equiv="refresh" content="5">
<!--定时转到其他页面 -->
<meta http-equiv="refresh" content="5;url=index.html"> 
</head>

2. Jump directly with a tag

<a href="http://baidu.com">百度一下</a>

3. Jump through javascript

// 直接跳转
window.location.href=&#39;index.html&#39;;
// 定时跳转
setTimeout("javascript:location.href=&#39;index.html&#39;", 5000);
其实两种方式是类似的,只是有的在javascript中写的跳转,另一种直接从html中写跳转
<button id="load" οnclick="window.location.reload(&#39;/html/index.html&#39;)">跳转</button>

4. How to jump to the previous page in html

window.history .go(-1); or window.history.back(-1);

Write in html

<a href=”#” onClick=”JavaScript :history.back(1);”>返回上一页</a>
<a href=”#” onClick=”javascript :history.Go(-1);”>返回上一页</a>

Write in javascript to jump to the previous page

<div id="btn">按钮</div>
<script type="text/javascript">
    var wrong = document.getElementById(&#39;btn&#39;);
    wrong.onclick = function() { 
window.history.go(-1);//返回上一页
window.history.back(-1);//返回上一页
   }
</script>

Related learning recommendations: html video tutorial

The above is the detailed content of How to implement page jump in html. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn