Home > Article > Web Front-end > How to implement page jump in html
How to implement page jump in html
- coldplay.xixiOriginal
- 2021-04-12 14:53:1739470browse
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'].
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='index.html';
// 定时跳转
setTimeout("javascript:location.href='index.html'", 5000);
其实两种方式是类似的，只是有的在javascript中写的跳转，另一种直接从html中写跳转
<button id="load" οnclick="window.location.reload('/html/index.html')">跳转</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('btn');
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!