如題 我有個網頁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也不要 該如何做?
試過了"#" 頁面會跑到最上 可是我不要他跑到最上
還有一個我忘了怎打了 會重整 可是我不要重整
已邀請的邦友 {{ invite_list.length }}/5
關閉的函式 rem() 改寫一下
rem(e) {
e.preventDefault();
// 後面接原來的程式碼
}
將預設的行為關掉，應該就可以了
詳細的說明： https://developer.mozilla.org/zh-TW/docs/Web/API/Event/preventDefault
所以要把#detail完整的去掉 href要打啥? #也不要有
如果一開始有用 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裡就可以不用錨點了......
iThome鐵人賽
看影片追技術