Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
機訪問pc網(wǎng)站時使用js自動跳轉(zhuǎn)到移動網(wǎng)站域名對應(yīng)的頁面鏈接javascript代碼。這是比較典型的跳轉(zhuǎn)需求,當(dāng)用戶使用手機打開pc網(wǎng)站鏈接時,希望能跳轉(zhuǎn)到移動網(wǎng)站對應(yīng)的頁面,適用于網(wǎng)站使用兩個域名區(qū)分pc,移動端的情況。比如www.域名.com是電腦站,m.域名.com是移動站這樣兩個域名,并且目錄結(jié)構(gòu)url是一樣的,只有域名不一樣。
此代碼當(dāng)手機訪問pc站時跳轉(zhuǎn)到移動站的對應(yīng)頁面,代碼放在pc站上。最好放在<head>下面第一位,最先加載這段js,跳轉(zhuǎn)更快一點。
<script type="text/javascript">
function browserRedirect() {
var hz=location.pathname;
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
window.location.href="http://m.reaer.com"+hz+"#www";
} else {
}
}
browserRedirect();
</script>
起html的錨點這個概念,你可能會感到會陌生,感覺自己沒有聽過。但是如果說起它的作用,你可能就恍然大悟了,就像你說起一個演員,可能不知道是誰,但是說起它演的一個角色可能立馬就知道那個人是誰了。
那么,什么是錨點呢?
錨點存在于html中,在默認情況下,可以快速的定位到指定元素,并將元素置于頁面最頂端。當(dāng)然我們可以按照自己的需求來確定錨點的位置,不一定要讓其定位在頂部。現(xiàn)如今有無數(shù)多的頁面已經(jīng)用上了錨點,比如Vue.js的官網(wǎng),在我們點擊標(biāo)題“Vue.js是什么”和標(biāo)題“起步”的時候,標(biāo)題都會自動移到頁面頂端。
錨點的使用
那接下來,我們就來看看幾種錨點的使用方法。
id定位
最基本的使用方法如下,當(dāng)點擊<a>標(biāo)簽時,頁面會相應(yīng)的將該div內(nèi)容置頂
錨點的id定位方法
name定位
除了id,還可以通過name進行定位,不過需要主要的是,如果采用name屬性進行定位的話,只適用于a標(biāo)簽,類似于p標(biāo)簽等都不支持。
錨點的name定位方法
javascript代碼進行定位
在原生的javascript中,有一個scrollIntoView()方法,可以實現(xiàn)頁面的錨點
javascript方法實現(xiàn)錨點
一個綜合的例子
講了三種實現(xiàn)方法后,接下來看一個實際運用的例子。首先是實際效果圖,在點擊左側(cè)欄時,頁面右邊會相應(yīng)的顯示指定段落的內(nèi)容
錨點的實際使用
首先看下html頁面的內(nèi)容,左側(cè)的ul代碼
左側(cè)的ul代碼
右側(cè)的內(nèi)容部分代碼
右側(cè)內(nèi)容部分代碼
css部分的代碼
css部分的代碼
將上述的代碼寫在一個html文件中,便可實現(xiàn)左側(cè)欄點擊,右側(cè)欄顯示相應(yīng)內(nèi)容的效果。
特殊情況
在實際項目中,我們總會遇到這樣一種情況,在頁面頂部有固定頭內(nèi)容的時候,如果直接使用上述方法,會得不到想要的效果
直接使用錨點的效果圖
通過該圖可以看出,第三段內(nèi)容的標(biāo)題被遮住了,實際應(yīng)該往下再顯示一點
那么,我們該怎么解決這個問題呢?在這里我想到了兩種方法,第一種是在每個內(nèi)容div上加一個隱藏的p元素,給p元素一個定高,再向上偏移,這種方法會導(dǎo)致頁面出現(xiàn)很多個多余的p元素,不推薦使用。
第二種是利用偽元素,偽元素可以占用實際的高度,這是推薦使用的方法
偽元素的樣式
通過給h3標(biāo)簽添加偽元素樣式,可完美解決這個問題,效果圖如下
使用偽元素后的效果圖
總結(jié)
今天的內(nèi)容你會了么?如果還沒有掌握的話,可以按照文章中的代碼,進行實踐,代碼總是要多敲才更容易理解。
如果喜歡的話,記得關(guān)注小編噢,小編后續(xù)會堅持出更多技術(shù)性的文章,如果有任何問題,也歡迎提問,小編都會盡力解答的。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。