jQuery hashchange问​​题

Question

我有一个简单的代码，有三种形式，一种不起作用，另外两种形式有效，但我想了解导致两种方法工作的原因。

请看一下简单的代码。 http://jsfiddle.net/NjWAz/（它没有正确滑动）。

如果仅附加div id，则它会正确滑动。 http://jsfiddle.net/NjWAz/2/ （这是我的第一个问题，是什么原因导致它实际工作？如何改变ID才能使其工作？）

另一种形式。 http://jsfiddle.net/NjWAz/1/ （它也有效，所以这是我的第二个问题，通过防止默认行为如何使其工作......以及什么是打破http://jsfiddle.net/NjWAz/工作的默认行为

Answer 1

它不适用于第一个示例的原因是因为您没有阻止链接的默认行为。当您使用哈希标记（例如#two）创建链接时，该链接会将页面移动到具有相同ID参数的元素（例如<div id="two">）

因为在第一个示例中，您有一个指向#two的链接，并且您有一个具有相同ID的元素<div id="two">，它会跳转到该元素，然后继续执行您的jQuery动画，导致它看起来好像正在移动到#three。

第二个示例，href属性值与任何HTML元素都不匹配，因此工作正常。

在第三个示例中，您正在阻止链接的默认行为，因此它可以正常工作。

您可以使用第三个示例中的方法阻止默认行为，也可以只返回false;在点击事件结束时：

$( function () {
    $(".clickIt a").click( function () {
        var linked = $(this).attr("href");
        var pos = $(linked).position();

        $(".clickSlider").stop().animate({left: -pos.left,}, 500 );

        return false;
    });
});​​​​​

希望我的解释是有道理的：）