如何将标签高度设置为内容高度

我已将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>

如果您需要更多的信息让我知道，我会提供。

来源

2011-11-22 Alistair Wise

您目前是否有调用该功能或仅在页面加载时执行？ –

我认为包装div会根据内容的高度展开和收缩。你确定高度没有设置在某个地方吗？ JSFiddle中的示例的链接将会很有帮助。

来源

2011-11-22 18:51:47

它似乎最初工作正常，因为您有页面加载代码，但一旦内容更改高度，您没有任何回忆该功能的东西。我将围绕该功能打包

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

来源

2011-11-22 18:57:11

嗨，你的代码在刷新高度方面起作用，但是它将其他div的高度设置为内容高度，我怎样才能将其更改为最小高度。在添加此代码之前，即使我在第一个标签中没有内容，该标签仍然具有最小高度。有任何想法吗？谢谢 –

你总是可以说，如果contentHeight <500比contentHeight = 500，这样你的最低高度将是500px。 –

如何将标签高度设置为内容高度

回答

相关问题