App下載

css怎么跳轉(zhuǎn)頁面？頁面跳轉(zhuǎn)的5種方法 ！

猿友 2021-07-01 14:24:35 瀏覽數(shù) (12626)
反饋

我們在正常的網(wǎng)頁開發(fā)中往往一個頁面是不能滿足我們的需求的，所以我們就需要使用到多頁面來進行實現(xiàn)我們的功能，那么今天我們就來說說有關(guān)于：“css怎么跳轉(zhuǎn)頁面？”這個問題吧！下面是小編查詢和整理的相關(guān)內(nèi)容資料，希望對大家的學習和理解有所幫助！

1、html實現(xiàn)

代碼如下：

<head>
<!-- 以下方式只是刷新不跳轉(zhuǎn)到其他頁面 -->
<meta http-equiv="refresh" content="10">
<!-- 以下方式定時轉(zhuǎn)到其他頁面 -->
<meta http-equiv="refresh" content="5;url=hello.html"> 
</head>

對于這個方法我們實現(xiàn)會相對的比較簡單，但是不足的點就是 Struts Tiles 中無法使用。

2、JavaScript實現(xiàn)

代碼如下：

<script language="javascript" type="text/javascript"> 
// 以下方式直接跳轉(zhuǎn)
window.location.href='hello.html';
// 以下方式定時跳轉(zhuǎn)
setTimeout("javascript:location.href='hello.html'", 5000); 
</script>

通過使用JavaScript這個方法，它是屬于比較靈活可以讓我們結(jié)合更多其他功能的，但是有不足的是會受到不同瀏覽器的影響。

3、在firefox中結(jié)合倒數(shù)JavaScript實現(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的問題

代碼如下所示：

<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é)：以上的例子都是主要來實現(xiàn)在五秒之后自動跳轉(zhuǎn)到同一目錄下的 hello.html文件中。

總結(jié)：

關(guān)于“css怎么跳轉(zhuǎn)頁面？”這個問題，今天我們也結(jié)束了介紹，如果你有其他的想法也可以分享你的看法和大家一同分享，更多有關(guān)于前端方面的知識我們都可以在W3Cschool中進行學習和了解。


HTML CSS JavaScript 前端

0 人點贊