Question

所以我正在this网站上工作，我有一个标签部分。我使用css构建我的标签，就像this一样。但是当我希望标签内容的大小不同时出现了一个问题。

我想我是否可以定位内容的高度，我可以使用Javascript设置.tabs的高度。

这是我正在使用的代码：

        $('.tab label').click(function() {
            $('.tab.current').removeClass('current');
            $(this).parent('.tab').addClass('current');
            $('.tabs').height($('.tab.current .content').outerHeight());
        });

由于某种原因，它没有抓住正确的价值。我不知道我做错了什么。任何帮助将不胜感激。

编辑：标签结构如下所示：

           <div class="tabs">

           <div class="tab one current">
                <input type="radio" id="tab-1" name="tab-group-1" checked>
                <label for="tab-1"></label>

                <div class="content">
                    <div class="tab-block first">
                </div><!-- .content -->
           </div><!-- .tab.one -->

           <div class="tab two">
                <input type="radio" id="tab-1" name="tab-group-1" checked>
                <label for="tab-1"></label>

                <div class="content">
                    <div class="tab-block first">
                </div><!-- .content -->
           </div><!-- .tab.two -->

           <div class="tab three">
                <input type="radio" id="tab-1" name="tab-group-1" checked>
                <label for="tab-1"></label>

                <div class="content">
                    <div class="tab-block first">
                </div><!-- .content -->
           </div><!-- .tab.three -->

           </div>

.tabs类需要一个最小高度，因为标签绝对位于彼此之上。

所以我想要的是获取.current类的.content的高度并将该高度设置为.tabs div。所以，不是高度溢出，它将推动它下面的所有内容。

我希望这能解决一些困惑。

Answer 1

导致此问题的原因有很多。主要是CSS3过渡。当应用.current类时，div是动画高度。在CSS3动画完成之前，javascript正在抓取值，这就是为什么你没有得到正确的值。

不使用javascript，更清洁的解决方案是将类应用于div.tabs：

div.tabs.currentOne {
     height: 250px;
}

div.tabs.currentTwo {
     height: 1022px;
}

div.tabs.currentThree {
     height: 882px;
}

在你的javascript中：

$('.tab label').click(function () {
    var $tabs = $('.tabs');
    $tabs.find('.tab.current').removeClass('current');
    var $currTab = $(this).parent('.tab').addClass('current');

    // remove any one of the classes that we'll apply
    $tabs.removeClass('currentOne currentTwo currentThree');

    // determine which one to apply
    if ($currTab.hasClass('one')) {
        $tabs.addClass('currentOne');
    }
    else if ($currTab.hasClass('two')) {
        $tabs.addClass('currentTwo');
    }
    else if ($currTab.hasClass('three')) {
        $tabs.addClass('currentThree')
    }
});

请注意，div.tabs的高度必须考虑子元素的填充和边框以及标签的高度。它是div.content类的高度+填充+ 2px底部填充+ 40px的标签。

还要确保将正确的类添加到默认为可见的选项卡。

Answer 2

在目标类中设置高度：auto

.your_class{
height:auto;
}

将此类添加到要分配的元素。

如何根据内容设置div的高度？

2 个答案: