Html 选择tab时更改div高度

我有一个选项卡式内容，有4个选项卡，每个选项卡中有两个div组成边框设计。我遇到的问题是，当选择了div所在的选项卡时，我不知道如何设置div的动画以改变高度。我有一个标记，标记如下

HTML

JS

我希望第一个选项卡保持当前的divs高度为38px，但是我希望其他3个选项卡的高度为185px-但是当选择选项卡时，高度从38px增加到185px。动画将类似于divs应用了：hover css选择器并进行0.5s转换时的动画，但它将在选中选项卡时发生，而不是在鼠标悬停时发生

抱歉，如果这不够详细或具体，这是我第一次发布问题/并处理jquery。

您可能希望使用

此方法可以对任何数值CSS属性（例如，高度）执行动画效果，这是您想要实现的

$( ".element-class" ).animate({
  height: "185px"
}, 500);

---

这里有一个jquery解决方案，以备您需要。 JS小提琴：

html

jquery/javascript

$('#tab1').click(function(){
    var h = $('#tabone').height();
    if(h < 185){    
        $('#tabone').animate({height:'185px'});
        $('#tabtwo').animate({height:'38px'});
    }
    else $('#tabone').animate({height:'38px'});
});

$('#tab2').click(function(){
    var h = $('#tabtwo').height();
    if(h < 185){    
        $('#tabtwo').animate({height:'185px'});
        $('#tabone').animate({height:'38px'});
    }
else $('#tabtwo').animate({height:'38px'});
});

$（'tab1'）。单击（函数（）{
var h=$（'#tabone'）.height（）；
如果（h<185）{
$（'#tabone'）。设置动画（{height:'185px'}）；
$（'#tabtwo'）。设置动画（{height:'38px'}）；
}
else$（'#tabone'）.animate（{height:'38px'}）；
});
$（'#tab2'）。单击（函数（）{
var h=$（'#tabtwo'）.height（）；
如果（h<185）{
$（'#tabtwo'）。设置动画（{height:'185px'}）；
$（'#tabone'）。设置动画（{height:'38px'}）；
}
else$（'#tabtwo'）.animate（{height:'38px'}）；
});

如果你读到这个问题，OP是在寻找CSS3解决方案，而不是jQuery动画。我看到了标签，但OP写道这是他第一次询问jQuery。他没有具体说明他想要一个完整的CSS3解决方案。诚然，这是不明确的，但他/她确实包含了标签CSS3，否则就不需要了，他/她还谈到了转换，jQuery正在添加类

。当前的
我坚持我的理论。：）我觉得很好。我相信这两种方法都会获得或多或少相同的结果，尽管我认为你的方法效率更高：）我自己还没有花时间测试大多数CSS3转换属性。我可能会再仔细研究一下！是的，你是对的，这两件事将做一个类似的事情，但如果你可以使用CSS3代替动画，你应该这样做。做简单的事情真的很容易。然而，这可能需要更多的时间来设置：（这是纯CSS）添加了CSS请求，而且更清楚-我想在选项卡内的两个div上显示高度效果[再次，我很抱歉我不够清晰/新]，这将是具有“bordertop\u animate”和“borderbottom\u animate”类的div，为了避免更多的jQuery解决方案，您能否澄清是否要使用CSS3？如果可能的话，我希望在CSS3中完成解决方案[我会尽快删除jQuery标记]。两个div['bordertop_animate'和'borderbottom_animate']处于绝对位置，因此当新高度应用于它们时，它们将朝父div的中心“增长”——如果这有意义的话。这也是为什么它们是空的，我将在单独的div中包含其他内容。我已经通过两个div上的：hover选择器实现了这一点，但我希望它在选中选项卡时出现。您可以用hover显示这一点吗？您还可以使用较少的jQuery
var tab_id=$（this）.attr（'data-tab'）$（this）.addClass（'current'）.sides（）.removeClass（'current'）$（“#”+tab_id）.addClass（'current'）.sides（）.removeClass（'current'）
$(document).ready(function(){

$('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
})

})

$( ".element-class" ).animate({
  height: "185px"
}, 500);

<ul>
    <li id="tab1">Tab One</li>
    <li id="tab2">Tab Two</li>
</ul>

<div id="tabone">Tab one</div>
<div id="tabtwo">Tab Two</div>

#tabone{
    width:200px;
    height:38px;
    border:solid blue;
    margin:10px;
}
#tabtwo{
    width:200px;
    height:38px;
    border:solid black;
    margin:10px;
}
#tab1:hover{
    cursor:pointer;
}
#tab2:hover{
    cursor:pointer;
}

$('#tab1').click(function(){
    var h = $('#tabone').height();
    if(h < 185){    
        $('#tabone').animate({height:'185px'});
        $('#tabtwo').animate({height:'38px'});
    }
    else $('#tabone').animate({height:'38px'});
});

$('#tab2').click(function(){
    var h = $('#tabtwo').height();
    if(h < 185){    
        $('#tabtwo').animate({height:'185px'});
        $('#tabone').animate({height:'38px'});
    }
else $('#tabtwo').animate({height:'38px'});
});