Question

我正在使用这个JS在页面上显示/隐藏DIV以阻止页面变得太忙。问题是页眉链接位于页面的一半，因此用户很可能会在页面中向下滚动。然后单击链接会使浏览器再次滚动回到顶部。有办法阻止这个吗？

只是奖励的一件事就是让显示的div更好地滚动或淡入，但这并不重要。谢谢！

HTML LINK：

    <a href="#" onclick="toggle_visibility('content1');">Charity Partnership</a>
    <div id="content1" class="alist" style="display:none;">Content</div>

JS：

    function toggle_visibility(id) {
        var thelist = document.getElementsByClassName("alist");
        for (var i = 0; i < thelist.length; i++) {
            thelist[i].style.display = 'none';
        }
        var e = document.getElementById(id);
        if (e.style.display == 'block') {
            e.style.display = 'none';
        } else {
            e.style.display = 'block';
        }
    }

Answer 1

让你的javascript函数返回false：

function toggle_visibility(id) {
        var thelist = document.getElementsByClassName("alist");
        for (var i = 0; i < thelist.length; i++) {
            thelist[i].style.display = 'none';
        }
        var e = document.getElementById(id);
        if (e.style.display == 'block') {
            e.style.display = 'none';
        } else {
            e.style.display = 'block';
        }
        return false;
    }

并在锚元素中使用该值：

<a href="#" onclick="return toggle_visibility('content1');">Charity Partnership</a>
    <div id="content1" class="alist" style="display:none;">Content</div>

Answer 2

您可以将href="#"替换为href="javascript:;"或删除href标记。

使用最后一个解决方案，当您将鼠标悬停在链接上时，您将看不到手形光标。

我会选择第一个解决方案，或者如果你想要使用最后一个解决方案，你可以添加a { cursor: pointer; }来显示而不是手。

Javascript - 单击时滚动回到顶部停止JS链接？

2 个答案: