Question

这听起来可能是一个奇怪的问题

我有一个有链接的页面

<a href="#" class="emails" > Email to Friends </a>

现在我将一个事件附加到锚标记，以便在单击给定div时将其切换为状态

Javascript代码看起来像这样

$(document).ready(function() {
    $(".emails").bind("click",function() {
       $("div#container").toggle
   })
})

现在上面的代码和所有的工作正常

但这是重要的事情

现在当我点击指定的链接时，我的页面焦点移到页面的顶部

我必须一直向下滚动以查看更改

任何人都可以帮助我吗

Answer 1

这样做是因为href="#"是一个空锚。锚点用于链接到页面中的特定点。空锚导致页面返回顶部。

要在您的javascript中修复此问题，您需要阻止来自propagating or "bubbling"的点击事件。您可以通过从点击事件返回false来执行此操作。

$(document).ready(function() {
    $(".emails").bind("click",function() {
       $("div#container").toggle();
       return false; // prevent propagation
   })
});

您还可以使用通常名为e的参数在bind的单击处理函数中使事件可用。有权访问该事件，您可以调用其中的方法，例如.preventDefault()。

$(document).ready(function() {
    $(".emails").bind("click", function(event) {
       $("div#container").toggle();
       event.preventDefault(); // this can also go at the start of the method if you prefer
   })
});

Answer 2

这将解决锚为空的所有情况。

$(document).ready(function () {
    $('a').click(function () {
        $('[href = #]');
        return false;

    });
});

Answer 3

这来自href='#'中的a。只需删除此标记即可。但是从技术上讲它不再是一个链接了，所以光标在它上面时会默认为文本选择器。您可以使用CSS中的cursor:pointer覆盖此值。请参阅左侧菜单on this website以供参考。

Answer 4

使用：

<a href="javascript:void(0)" class="emails" > Email to Friends </a>

或者，使用jQuery，

$(document).ready(function() {
    $(".emails").attr("href","javascript:void(0)");
})

Void（0）返回..好吧..它不会返回任何内容。浏览器知道如何做任何事情（即，如果你href=""会发生什么），并#（#是页面的顶部），但不知道如何去无效的“价值”。

每当在属性中放置javascript:时，属性的值都会设置为内部代码的返回值。在第一次访问属性时调用代码。

但是，void(0)什么都不返回。甚至不是""。浏览器认为链接根本不是链接。

为什么单击链接会转到页面顶部？

4 个答案: