Question

示例：http://www.gassmanfg.com/the-g&g-team

我创建了这个简单的节目隐藏内容示例 - 但是当你在页面底部然后点击任何缩略图时，它会跳到顶部或缩略图上不是没有如何？

我想阻止这个跳跃问题

还尝试了event.preventDefault（）但仍无法正常工作。

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;
    });
});

Answer 1

。

$（ “tab_content”）隐藏（）; - 这会导致问题。当您的netx标签尚未显示时，页面高度变小。

面对同样的问题一次，我的解决方案是在隐藏幻灯片之前设置页面的最小高度。代码如下所示：

 $("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缩略图图像时页面跳跃

1 个答案: