如何用html代码 实现页面跳转
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用html代码 实现页面跳转相关的知识，希望对你有一定的参考价值。
下面列了五个例子来详细说明，这几个例子的主要功能是：在5秒后，自动跳转到同目录下的hello.html（根据自己需要自行修改）文件。
1、html的实现
<head><!-- 以下方式只是刷新不跳转到其他页面 -->
<meta http-equiv="refresh" content="10">
<!-- 以下方式定时转到其他页面 -->
<meta http-equiv="refresh" content="5;url=hello.html">
</head>
优点：简单；
缺点：Struts Tiles中无法使用。
2、javascript的实现
<script language="javascript" type="text/javascript">// 以下方式直接跳转
window.location.href='hello.html';
// 以下方式定时跳转
setTimeout("javascript:location.href='hello.html'", 5000);
</script>
优点：灵活，可以结合更多的其他功能；
缺点：受到不同浏览器的影响。
3、结合了倒数的javascript实现（IE）
<span id="totalSecond">5</span><script language="javascript" type="text/javascript">
var second = totalSecond.innerText;
setInterval("redirect()", 1000);
function redirect()
totalSecond.innerText=--second;
if(second<0) location.href='hello.html';
</script>
优点：更人性化；
缺点：firefox不支持（firefox不支持span、div等的innerText属性）。
4、解决Firefox不支持innerText的问题
<span id="totalSecond">5</span><script language="javascript" type="text/javascript">
if(navigator.appName.indexOf("Explorer") > -1)
document.getElementById('totalSecond').innerText = "my text innerText";
else
document.getElementById('totalSecond').textContent = "my text textContent";
</script>
5、整合3)和3')
<span id="totalSecond">5</span><script language="javascript" type="text/javascript">
var second = document.getElementById('totalSecond').textContent;
if (navigator.appName.indexOf("Explorer") > -1)
second = document.getElementById('totalSecond').innerText;
else
second = document.getElementById('totalSecond').textContent;
setInterval("redirect()", 1000);
function redirect()
if (second < 0)
location.href = 'hello.html';
else
if (navigator.appName.indexOf("Explorer") > -1)
document.getElementById('totalSecond').innerText = second--;
else
document.getElementById('totalSecond').textContent = second--;
</script> 参考技术A
页面跳转一般来说需要触发键
例如：
浏览器的类型
访问终端的类型（手机，电脑，PC）
直接跳转
一般来说用JS来跳转，跳转的带来是
<script language="javascript" type="text/javascript">window.location.href="您的网址";
</script> 参考技术B 代码如下：
<html>
<head>
<title> page A </title>
<script type="text/javascript">
function delyLoad()
setTimeout(function()
window.location.href='b.html';
,5000)
</script>
</head>
<body onload="delyLoad()">
<h1>A</h1>
</body>
</html>
首先做一个计时器，记时5秒。5秒后将location的链接转为b.html。如果b.html与a不在同一个页面下，最好写绝对路径
如何用jquery实现页面滚动到指定位置后触发事件的效果？
比如一个页面应该会有30条数据，页面首次加载10条，然后用户向下滚动页面到底端部分时，触发一个事件来读取其他数据。
求这个“触发”的方法。
我了解了一下，大部分的方法都是监控滚动条的移动，当到达底端部分时触发。用jquery有没有方法实现呢？
方法：
$(function()
$(".div_md a").click(function()
$("html, body").animate(
scrollTop: $($(this).attr("href")).offset().top - 100 + "px"
, 1500);
return false;
);
//滚动条滚动到指定位置触发下面事件
var getDiv_md = $(".div_md");
var offSet = getDiv_md.offset().top;
$(window).scroll(function()
if ($(window).scrollTop() > offSet)
$(".div_md").css("position":"fixed","left":"10px","top":"10px","z-index":"2");
else
$(".div_md").css("position":"","left":"0px","top":"","z-index":"");
)
);
1、jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
2、编程工具
Notepad++：一套有特色的自由软件的纯文字编辑器，有完整的中文化接口及支持多国语言编写的功能。它的功能比Windows中的 Notepad（记事本）强大，除了可以用来制作一般的纯文字说明文件，也十分适合当作编写电脑程序的编辑器。Notepad++ 不仅有语法高亮度显示，也有语法折叠功能，并且支持宏以及扩充基本功能的外挂模组。
Brackets：一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 （IDE工具）。该项目由 Adobe 创建和维护，根据MIT许可证发布，支持Windows、Linux平台。Brackets的特点是简约、优雅、快捷，它的核心目标是减少在开发过程中那些效率低下的重复性工作，例如浏览器刷新，修改元素的样式，搜索功能等等。
JS Nice：一款让经过混淆处理的JavaScript代码可读更好的工具。它使用一种用于JavaScript代码美化的去混淆和去压缩引擎。JSNice采用先进的机器学习和程序分析技术，从可用的开源项目学习命名和类型规律。
参考技术A scrollBottomTest =function() $("#contain").scroll(function() var $this =$(this), viewH =$(this).height(),//可见高度 contentH =$(this).get(0).scrollHeight,//内容高度 scrollTop =$(this).scrollTop();//滚动高度 //if(contentH - viewH - scrollTop <= 100) //到达底部100px时,加载新内容 if(scrollTop/(contentH -viewH)>=0.95) //到达底部100px时,加载新内容 // 这里加载数据.. ); 参考技术B $(window).scroll(function ()if ($(window).scrollTop() == $(document).height() - $(window).height())
alert('bottom!!');
);
以上是关于如何用html代码 实现页面跳转的主要内容，如果未能解决你的问题，请参考以下文章