1

示例：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;
    });
});
4

1 回答 1

5

$(".tab_content").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;
    });
于 2013-04-02T11:07:44.353 回答