0

jquery タブに問題があります。これは、既にここで解決されている次の問題と非常によく似ています。

ここをクリックしてウェブサイトをご覧ください

以下のようにしたので、タブクリック時のジャンプが変わりました。

しかし、問題は、コンテンツ div のテキストの長さが大きく異なり、レイアウトにフッターがあるため、テキストが最も多いタブをクリックしてから、テキストが少ないタブをクリックすると、巨大なテキストが表示されることです。テキストとフッターの間のギャップ。特定のタブをクリックしたときに、高さが常にテキストの長さに正確に正確に調整され、最高にとどまらない可能性はありますか?

私の問題が理解できることを願っています。助けていただければ幸いです。

これが私の例です：

http://crossmediasolutions.de/cmsweb/index.htm

jqueryは次のとおりです。

$(document).ready(function() {
    $(".tab_content").hide(); //Hide all content
    $(".tabs li:first").addClass("current").show();
    $(".tab_content:first").show();
    $(".tabs li").click(function() {
        $(".tabs li").removeClass("current");
        $(this).addClass("current");
        $('.tab_container').css('min-height', $('.tab_container').height()+'px');
        $(".tab_content").hide();
        var activeTab = $(this).find("a").attr("href");
        $(activeTab).fadeIn();
        return false;
    });
});
4

1 に答える 1

0

tab_container の高さは、アクティブ コンテンツの高さより大きくする必要があります。次のようなことを試してみてください。

$(".tabs li").click(function() {
        $(".tabs li").removeClass("current");
        $(this).addClass("current");
        var activeTab = $(this).find("a").attr("href");
        var h = $(activeTab).height() + 20;
        $('.tab_container').css('height', h + 'px');
        $(".tab_content").hide();
        $(activeTab).fadeIn();
        return false;
    });
于 2013-09-25T09:11:00.123 に答える