頁面跳轉——所跳轉頁面有display:none(錨點跳轉不到)
今天遇到了一個難題,就是要從A頁面跳轉到B頁面的指定地方,但這個指定的地方又有個display:none;在網上找了一下解決的辦法一直沒有找到,或許是我搜索的關鍵詞不對吧!想了一小段時間後忽然靈光一閃,嘿嘿嘿!腦子裡蹦出一個自認為覺得好的點子。
眾所周知,在沒有display:none這個傢伙干擾的前提下,從A頁面跳轉到B頁面的指定地點是挺容易的。例:
A頁面程式碼
<a href="javascript:void(0)" onclick="skip01()">跳轉</a>
<script>
function skip01(){
window.location.href="B.html#s"; //跳轉到B.html頁面,#s 是錨點,這裡不要空格
}
</script>
B頁面程式碼
//用來撐開頁面
s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/>
s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/>
s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/> s<br/>
//跳轉到這裡
<a id="s">swdfds</a>//要跳轉到的位置
這樣就很簡單的,如果要平滑效果,就再加點js程式碼。
下面是有display:none的解決辦法:
A頁面的程式碼不變,只有B頁面的js有改變。
<script>
var src_0=location.href;//獲取當前頁面的網址
var s=src_0.split("#");//以#分割網址
var id_0=s[1];//獲取#後的id名
if(id_0.length>0){//判斷id是否存在
var display_0=document.getElementById(id_0);//找到此id
display_0.style.display="block";//將其display的值便為block
}
</script>
由於js程式碼在最初就一起被載入完成,所以還是能跳轉到A頁面指定的位置。