1

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

我想如果我可以定位内容的高度，我就可以使用 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。这样它就不会溢出高度，而是将所有内容推到它下面。

我希望这能消除一些困惑。

4

2 回答 2

3

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

除了使用 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 的标签。

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

于 2013-07-16T20:04:25.217 回答
0

在您的目标类中设置高度：自动

.your_class{
height:auto;
}

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

于 2013-07-16T19:28:11.913 回答