单击<a href=> </a>时防止屏幕移动

Question

我正在使用<a href>元素和:targetcss选择器来显示<div>默认设置为display:none.问题是,当我点击链接显示时<div>,它会自动向我的网站滚动<div>.

有没有办法阻止屏幕移动？

不幸的是,除了CSS和HTML之外,我还没有精通任何东西.

Answer 1

您可以使用event.preventDefault()来避免这种情况.像这样的东西:

$('a.yourclass').click(function(e)
{
    //your code
    e.preventDefault();
});

要么:

<a href="javascript:void(0)" onclick="somefunction(); return false;">link</a>

Answer 2

在链接中输入：

<a href="javascript:void();">Link here</a>

Answer 3

这是一个有点 hack，但你可以使用基本的 css 解决方法：

仅 CSS 示例

#div1 {
    height: 0;
    overflow:hidden;
}
#div1:target {
    height: auto;
    margin-top: -110px;
    padding-top: 110px;
}
#div2 {
    background:red;
}

<a href="#div1">Click to show</a>

<div id="div1">
    <div id="div2">Content</div>
</div>

如果你需要它更灵活一点，你可以添加一些js......

更灵活的 JS 示例

$('a').click(function () {
    $('#div1').css({
        'margin-top': 0 - $('#div1').position().top + $(window).scrollTop(),
            'padding-top': $('#div1').position().top - $(window).scrollTop()
    });
});

基本上你用负边距向上拉动 div1 的顶部，然后用填充将 div2 向下推回，这样 div1 的顶部就位于窗口的顶部......就像我说的，这是一个 hack，但它确实诡计。