Question

首次单击选项卡时，动画内容的高度不起作用。首次点击后它可以工作。这是链接::

HTML

    <div id="tabs-container">

    <ul class="tabs-menu">
        <li class="current"><a href="#tab-1">Tab 1</a></li>
        <li><a href="#tab-2">Tab 2</a></li>
    </ul>

    <div class="tab">
        <div id="tab-1" class="tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Nullam p.</p>
        </div>
        <div id="tab-2" class="tab-content">
            <p>Donec semper dictum sem, quis pretium sem malesuada non. Proin venenatis orci vel nisl porta sollicitudin. Pellentesque sit amet massa et orci malesuada facilisis vel vel lectus. Etiam tristique volutpat auctor. Morbi nec massa eget sem ultricies fermentum id ut ligula. Praesent aliquet adipiscing dictum. Suspendisse dignissim dui tortor. Integer faucibus interdum justo, mattis commodo elit tempor id. Quisque ut orci orci, sit amet mattis nulla. Suspendisse quam diam, feugiat at ullamcorper eget, sagittis sed eros. Proin tortor tellus, pulvinar at imperdiet in, egestas sed nisl. Aenean tempor neque ut felis dignissim ac congue felis viverra. </p>

        </div>
    </div>
    <br/>

</div>

CSS

p{
    margin:0;
    padding:0;
}
.tabs-menu {
    height: 30px;
    float: left;
    clear: both;
    transform:rotate(270deg);
    -ms-transform:rotate(270deg); /* IE 9 */
    -webkit-transform:rotate(270deg); /* Safari and Chrome */
    margin-top: 80px;
    margin-right: -68px;
    margin-left: -68px;
}

.tabs-menu li {
    height: 30px;
    line-height: 30px;
    float: left;
    margin-right: 0px;
    background-color: #fff;
    border: 1px solid #9CCD6C;
    list-style: None;
}

.tabs-menu li.current {
    position: relative;
    background-color: #9CCD6C;
    border-bottom: 1px solid #9CCD6C;
    z-index: 5;
}

.tabs-menu li a {
    padding: 10px;
    text-transform: uppercase;
    color: #9CCD6C;
    text-decoration: none; 
}

.tabs-menu .current a {
    color: #fff;
}

.tab {
    border: 1px solid #9CCD6C;
    background-color: #fff;
    float: left;
    margin-bottom: auto;
    width: auto;
}

.tab-content {
    width: 400px;
    padding: 20px;
    display: none;
}

#tab-1 {
 display: block;   
}

的JScript

    $(document).ready(function() {
    $(".tabs-menu a").on('click',function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");        
        $(tab).css("display","block");
        $(".tab-content").not(tab).css("display", "none");
        $(".tab").animate({
            height: $(tab).height()+40,
        }, "slow");

    }
    );

});

我是Jquery的新手，我一直在使用其他人的代码并操纵它。

Answer 1

在这种情况下，.tab元素的初始高度是默认值auto。这就是动画最初没有发生的原因。要解决此问题，只需在.tab元素上设置高度。

Updated example - 它现在有效。

.tab {
    border: 1px solid #9CCD6C;
    background-color: #fff;
    float: left;
    margin-bottom: auto;
    width: auto;
    height:140px;      /* Added this */
}

上述解决方案依赖于设置硬编码高度，因此它不适用于不同高度的动态内容。最好将元素的高度设置为计算的高度。

$('.tab').height($('.tab').height());

jsFiddle example证明它现在适用于不同的高度。

Answer 2

首先不是动画，因为标签2的高度未设置为与标签1的高度相匹配。要使其设置动画，您需要在标签页首次设置标签2的高度为标签1的高度装载

请参阅此小提琴，我添加了以下代码：http://jsfiddle.net/M6m8R/1/

var firstTabHeight = $('#tab-1').height() + 40;
$('.tab').height(firstTabHeight);

Answer 3

它不知道在单击事件发生后作为内联css插入的.tab的高度，所以要么你应该动态地在你的click eventHandler之外使用jQuery作为inlne css添加初始.tab高度，或者你有将140px作为默认值插入到您的css中，并记住在默认内容发生变化时更改它（所以它的高度）。

我会选择动态选项，比如：

$('.tab').css('height', $('.tab').height());

因为我不想记住关于我的项目的无用事情;-)玩得开心http://jsfiddle.net/JU4rp/19/。

JQuery动画在第一次单击时不起作用

3 个答案: