Question

构建前端并感到有些困惑，因为我无法阻止浏览器在触发img上的点击事件时跳转。

我认为event.preventDefault（）或者返回false都会这样做，但我显然错过了一些东西，完全不知道接下来会尝试什么！

这是代码

    $("#imgViewer-thumbs").find("img").click(function (event) {
        event.preventDefault();
        var $imgViewPane = $("#imgViewPane"),
                $selectedImage = $imgViewPane.find(".selected-image"),
                $clickedImage = $(this),
                $clickedImageIndex = $clickedImage.prevAll().length + 1,
                $maxIndex = $clickedImageIndex + $clickedImage.nextAll().length,
                $targetImage = $imgViewPane.find(":nth-child(" + $clickedImageIndex + ")");

        if (!$targetImage.hasClass("selected-image")) {
            $selectedImage.fadeOut(100, function () {
                $targetImage.addClass("selected-image");
                $selectedImage.removeClass("selected-image");
                $targetImage.fadeIn(100);
            });
        }
        console.log('Returning false');
        return false;
    }
    );

编辑：在jsfiddle中设置imageviewer http://jsfiddle.net/tEXaa/

Answer 1

问题是图像容器"#imgViewPane"没有保持高度。因此，prev图像淡出"#imgViewPane"会失去高度，因此页面会丢失滚动位置。

我更新了你的小提琴：http://jsfiddle.net/tEXaa/1/

Answer 2

我遇到了同样的问题，但点击了锚标签，问题不在于任何jquery代码，而是带有负边距。

而不是使用像这样的东西

<div width="600px">
   <div id="top-left" style="height:200px;"> some content </div>
   <div id="top-right" style="margin-top:-200px;> content"</div>
</div>

使用

<div width="600px">
   <div id="top-left" style="float:left;"> some content </div>
   <div id="top-right" style="float:right;> content"</div>
</div>

单击链接时跳转Html页面

2 个答案: