-2

Building a frontend and getting a bit baffled since I´m unable to stop the browser to jump when triggering a click event on an img.

I thought that either event.preventDefault() or return false would do it but I am obviously missing something and is completely at a loss about what to try next!

Here is the code

    $("#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;
    }
    );

EDIT: Setup the imageviewer in jsfiddle here http://jsfiddle.net/tEXaa/

4

2 回答 2

3

问题是图像容器"#imgViewPane"不保持高度。因此，上一个图像淡出"#imgViewPane"失去高度，结果页面失去滚动位置。

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

于 2013-06-09T13:55:47.747 回答
0

我有同样的问题，但点击锚标签，问题不在于任何 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>
于 2013-06-09T13:19:22.553 回答