1. 程式人生 > >頁面跳轉——所跳轉頁面有display:none(錨點跳轉不到)

頁面跳轉——所跳轉頁面有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頁面指定的位置。