Javascript 页面在单击不同的2个缩略图时跳转

例如：

我已经创建了这个简单的显示隐藏内容的示例——但当你们在页面底部，然后点击任何缩略图时，它会跳到顶部或缩略图上，不知道怎么做

我想停止这个跳跃问题

还尝试了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;
    });
});

$（“.tab_内容”）.hide（）；-这就造成了问题。您的页面高度正在变小，而您的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;
    });

$（“.tab_内容”）.hide（）；-这就造成了问题。您的页面高度正在变小，而您的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;
    });