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 - 页面在点击链接后返回顶部

回答

相关问题