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

似乎最初它正常工作，因为你有页面加载的代码，但一旦内容改变高度，你没有任何召回该功能的东西。我会围绕一个

包装该函数

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

Answer 2

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

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

2 个答案: