我們?cè)谡5木W(wǎng)頁(yè)開(kāi)發(fā)中往往一個(gè)頁(yè)面是不能滿(mǎn)足我們的需求的,所以我們就需要使用到多頁(yè)面來(lái)進(jìn)行實(shí)現(xiàn)我們的功能,那么今天我們就來(lái)說(shuō)說(shuō)有關(guān)于:“css怎么跳轉(zhuǎn)頁(yè)面?”這個(gè)問(wèn)題吧!下面是小編查詢(xún)和整理的相關(guān)內(nèi)容資料,希望對(duì)大家的學(xué)習(xí)和理解有所幫助!
1、html實(shí)現(xiàn)
代碼如下:
<head>
<!-- 以下方式只是刷新不跳轉(zhuǎn)到其他頁(yè)面 -->
<meta http-equiv="refresh" content="10">
<!-- 以下方式定時(shí)轉(zhuǎn)到其他頁(yè)面 -->
<meta http-equiv="refresh" content="5;url=hello.html">
</head>
對(duì)于這個(gè)方法我們實(shí)現(xiàn)會(huì)相對(duì)的比較簡(jiǎn)單,但是不足的點(diǎn)就是 Struts Tiles 中無(wú)法使用。
2、JavaScript實(shí)現(xiàn)
代碼如下:
<script language="javascript" type="text/javascript">
// 以下方式直接跳轉(zhuǎn)
window.location.href='hello.html';
// 以下方式定時(shí)跳轉(zhuǎn)
setTimeout("javascript:location.href='hello.html'", 5000);
</script>
通過(guò)使用JavaScript這個(gè)方法,它是屬于比較靈活可以讓我們結(jié)合更多其他功能的,但是有不足的是會(huì)受到不同瀏覽器的影響。
3、在firefox中結(jié)合倒數(shù)JavaScript實(shí)現(xiàn)
代碼如下:
<script language="javascript" type="text/javascript">
var second = document.getElementById('totalSecond').textContent;
setInterval("redirect()", 1000);
function redirect()
{
document.getElementById('totalSecond').textContent = --second;
if (second < 0) location.href = 'hello.html';
}
</script>
4、解決Firefox不支持innerText的問(wèn)題
代碼如下所示:
<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、整合
<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>
小結(jié):以上的例子都是主要來(lái)實(shí)現(xiàn)在五秒之后自動(dòng)跳轉(zhuǎn)到同一目錄下的 hello.html文件中。
總結(jié):
關(guān)于“css怎么跳轉(zhuǎn)頁(yè)面?”這個(gè)問(wèn)題,今天我們也結(jié)束了介紹,如果你有其他的想法也可以分享你的看法和大家一同分享,更多有關(guān)于前端方面的知識(shí)我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。