iT邦幫忙

0

HTML錨跳轉後頁面不產生任何變化

  • 分享至 

  • xImage

如題 我有個網頁http://ac1011.hopto.org:4095/zh_index.html
跟錨detail 點了會自動連結到http://ac1011.hopto.org:4095/zh_index.html#detail
並彈出一個歌曲詳情視窗 OK這很正常可是當他要跳轉回來(關閉)時我希望跳轉到http://ac1011.hopto.org:4095/zh_index.html
但是頁面除了詳情視窗關閉以外不要有任何變化像是重整或是跑到最上
目前我只能透過一個無作用錨點來達成我要的功能

location.href="#de";

可是這次我不希望網頁上有任何後綴 連#de也不要 該如何做?
試過了"#" 頁面會跑到最上 可是我不要他跑到最上
還有一個我忘了怎打了 會重整 可是我不要重整

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
wolfwang
iT邦研究生 4 級 ‧ 2018-11-21 12:51:11

關閉的函式 rem() 改寫一下

rem(e) {
  e.preventDefault();
  // 後面接原來的程式碼

}

將預設的行為關掉,應該就可以了

詳細的說明: https://developer.mozilla.org/zh-TW/docs/Web/API/Event/preventDefault

看更多先前的回應...收起先前的回應...

我試試 對了要跳回原本的網頁要怎打是"/"嗎 我好像有點忘了

wolfwang iT邦研究生 4 級 ‧ 2018-11-21 13:00:11 檢舉
wolfwang iT邦研究生 4 級 ‧ 2018-11-21 13:01:20 檢舉

不是把打開的燈箱關掉而已嗎?

所以要把#detail完整的去掉 href要打啥? #也不要有

wolfwang iT邦研究生 4 級 ‧ 2018-11-21 14:54:36 檢舉

如果一開始有用 preventDefault 的話,url 上的 hash 就不會出現。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    #detail {display:none}
  </style>
</head>
<body>
    <a href="#detail" onclick="show(event)">詳情</a>  
    <div id="detail">詳情區塊 <button onclick="rem(event)">關閉</button></div>
  <script>
    function show(e){
       e.preventDefault();
       var elm = document.getElementById("detail");
       elm.setAttribute("style","display:block");
    }
    function rem(e){
       e.preventDefault();
       var elm = document.getElementById("detail");
       elm.setAttribute("style","display:none");
    }
 </script>
</body>
</html>

如果不想改的話,只是要處理據 hash 的話,那就可以試這樣

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    #detail {display:none}
  </style>
</head>
<body>
    <a href="#detail" onclick="show()">詳情</a>       
    <div id="detail">詳情區塊 <button onclick="rem()">關閉</button></div>
  <script>
    function show(){
       var elm = document.getElementById("detail");
       elm.setAttribute("style","display:block");
    }
    function rem(){
       var elm = document.getElementById("detail");
       elm.setAttribute("style","display:none");
       history.replaceState(null, null, ' ');
    }
 </script>
</body>
</html>

好吧已經解決了 把target選擇器的code丟到js裡就可以不用錨點了......

我要發表回答

立即登入回答