탭 높이를 내용 높이로 설정하는 방법

Question

JQuery 탭을 내 웹 사이트에 포함 시켰지만 탭을 사용하여 내용의 높이를 늘리거나 줄이는 것이 좋습니다. 예를 들어 내 첫 번째 탭이 내용의 높이까지 펼쳐지는 순간에 두 번째 탭으로 이동하면 내용이 훨씬 적어도 첫 번째 탭의 높이로 유지됩니다. 혼란 스럽다면 죄송합니다. 여기

는 탭의 코드입니다

<script type="text/javascript"> 

    $(document).ready(function() { 

//Default Action 
$(".tab_content").hide(); //Hide all content 
$("ul.tabs li:first").addClass("active").show(); //Activate first tab 
$(".tab_content:first").show(); //Show first tab content 

//On Click Event 
$("ul.tabs li").click(function() { 
    $("ul.tabs li").removeClass("active"); //Remove any "active" class 
    $(this).addClass("active"); //Add "active" class to selected tab 
    $(".tab_content").hide(); //Hide all tab content 
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
    $(activeTab).fadeIn(); //Fade in the active content 
    return false; 
}); 

    }); 
    </script> 

을 그리고 여기에 내가 주변 div 래퍼로 div의 높이를 제어하는 ​​데 사용할 코드 조각입니다 :

<script type="text/javascript"> 
$(function(){ 
var height = $("#content").height(); 
$(".tab_container").height(height); 
}); 
</script> 

당신이 만약 더 많은 정보가 필요하면 알려주세요. 나는 그것을 제공 할 것입니다.

Answer 1

나는 래퍼 div가 콘텐츠의 높이에 따라 확장 및 축소 될 것이라고 생각합니다. 높이가 어딘가에 설정되지 않았습니까? JSFiddle에서 예제에 대한 링크가 도움이 될 것입니다.

Answer 2

페이지로드시 코드가 있기 때문에 초기에는 올바르게 작동하지만 내용이 높이로 변경되면 해당 기능을 호출하지 않습니다. 그 기능을 한 줄로 둘러 쌀 것입니다.

$("ul.tabs li").click(function() { 
     var contentHeight = $("#content").height(); 
     $(".tab_container").height(contentHeight); 
});