JavaScript - 頁面在點擊鏈接後返回頂部

這使得它很煩人，因爲您必須向下滾動到您所在的位置。有人可以告訴我這是什麼行爲嗎？JavaScript - 頁面在點擊鏈接後返回頂部

function toggle_visibility(id) { 
    var e = document.getElementById(id); 
    if(e.style.display == 'block') 
     e.style.display = 'none'; 
    else 
     e.style.display = 'block'; 
}

的Html

<a href="#" onclick="toggle_visibility('foo');">School Area</a> 
<div id="foo" style="display: none;">...</div>

來源

2016-08-10 peopleloving

的可能的複製[如何防止「＃」鏈接的點擊來自jQuery的跳躍頁首] （http://stackoverflow.com/questions/3252730/how-to-prevent-a-click-on-a-link-from-jumping-to-top-of-page-in-jquery） –

這是因爲href="#"告訴瀏覽器鏈接被點擊時跳轉到頁面頂部。

您可以防止默認操作從你onclick屬性處理程序返回false：

<a href="#" onclick="toggle_visibility('foo');return false;">School Area</a>

但是當你正在使用jQuery，可以考慮安裝該事件處理動態（甚至使用事件代表團），然後用preventDefault：

<a href="#" class="toggle-vis" data-visibility="foo">School Area</a>

那麼這裏有一個委託處理程序：

$(document.body).on("click", ".toggle-vis", function(e) { 
    e.preventDefault(); 
    toggle_visibility(this.getAttribute("data-visibility")); 
});

請注意data-visibility屬性如何控制我們切換的內容。

你會得到別人告訴你改變這一行：

toggle_visibility(this.getAttribute("data-visibility"));

到

// Only do this if you understand what `data` does 
toggle_visibility($(this).data("visibility"));

但data不只是data-*元素的訪問，它更（並且少於）。如果不需要該工作設置功能，沒有必要來包裝元素在jQuery的實例，並調用data.但是，如果你喜歡更多的jQuery™：

toggle_visibility($(this).attr("data-visibility"));

也適用。

來源

2016-08-10 06:27:12

出現這種情況是因爲#。這種加入href：

<a href="javascript:void(0)"></a>

來源

2016-08-10 06:27:08

<a>元素的默認行爲是navigation/redirection

使用e.preventDefault()防止默認動作

function toggle_visibility(e, id) { 
 
    e.preventDefault(); 
 
    var e = document.getElementById(id); 
 
    if (e.style.display == 'block') 
 
    e.style.display = 'none'; 
 
    else 
 
    e.style.display = 'block'; 
 
}

<a href="#" onclick="toggle_visibility(event,'foo');">School Area</a> 
 
<div id="foo" style="display: none;">...</div>

來源

2016-08-10 06:27:28 Rayon

這是你可以使用

使用此元素的默認行爲javascript:void(0)在href以避免其行爲。在功能

<a href="javascript:void(0)" onclick="toggle_visibility('foo');">School Area</a>

使用preventDefault()以防止它的默認行爲來執行。

function toggle_visibility(e, id) { 
    e.preventDefault(); 
    var e = document.getElementById(id); 
    if(e.style.display == 'block') 
     e.style.display = 'none'; 
    else 
     e.style.display = 'block'; 
}

來源

2016-08-10 06:27:36

你也可以改變從

<a href="#" onclick="toggle_visibility('foo');">School Area</a>

到

<a style="cursor:pointer;text-decoration:underline;color:blue" 
    onclick="toggle_visibility('foo');" 
>School Area</a>

來源

2016-08-10 06:30:37 some1

JavaScript - 頁面在點擊鏈接後返回頂部

回答

相關問題