点击不同的2缩略图时页面跳动 [英] Page is jumping while clicking on different-2 thumbnail image

问题描述

示例: http://www.gassmanfg.com/the-g&g-团队

我已经创建了一个简单的显示隐藏内容示例-但是，当您在页面底部，然后单击任何缩略图时，它跳到顶部还是缩略图上，不是吗?

I have created this simple show hide content example - but when you are at bottom of page and then click on any thumbnail image it jumps on top or at thumbnail don't no how?

我想停止这个跳跃问题

还尝试了event.preventDefault()，但仍然无法正常工作.

also tried event.preventDefault() but still not working.

event.preventDefault();

以下是我正在使用的Jquery:

$(document).ready(function () {
    //Default Action
    $(".tab_content").hide();
    $("ul.tabs li:first").addClass("active").show();
    $(".tab_content:first").show();

    //On Click Event
    $("ul.tabs li").click(function () {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();
        var activeTab = $(this).find("a").attr("href");
        $(activeTab).fadeIn();
        if (activeTab == '#tab1') {
            $(window).resize(function () {
                //$("#tab2").css({'display':'block'});
                //$("#map_canvas").css({'width':'630px', 'height':'400px'});
                //initialize();
                //alert('Changed!');
            });
        }
        return false;
    });
});

推荐答案

$(.tab_content").hide(); -这会导致问题.您的页面高度正在变小，而您的netx标签尚未显示.

$(".tab_content").hide(); - this cause the problem. You page height is becoming smaller while your netx tab is didn't showed yet.

一次遇到相同的问题，我的解决方法是在隐藏幻灯片之前设置页面的最小高度.代码如下:

Faced same problem once, my solution was to set min-height of the page before hiding slide. Code looks like this:

 $("ul.tabs li").click(function () {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $('.tab_container').css('min-height', $('.tab_container').height()+'px');
        $(".tab_content").hide();
        var activeTab = $(this).find("a").attr("href");
        $(activeTab).fadeIn();
        if (activeTab == '#tab1') {
            $(window).resize(function () {
                //$("#tab2").css({'display':'block'});
                //$("#map_canvas").css({'width':'630px', 'height':'400px'});
                //initialize();
                //alert('Changed!');
            });
        }
        return false;
    });

这篇关于点击不同的2缩略图时页面跳动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！