选择选项卡时更改div高度 [英] Change div height when tab is selected

问题描述

我有一个选项卡式内容，其中包含4个选项卡，每个选项卡中将有两个div组成边框设计.我遇到的问题是，我不知道如何在选中div所在的选项卡时为div设置动画效果.我有一个提琴供参考，标记在下面.

I have a tabbed content that has 4 tabs and in each there are going to be two divs that make up the border design. The problem that I'm running into is that I have no idea how to animate the divs to change height when the tab they're located in is selected. I have a fiddle for reference and the markup is below.

HTML

<div class="container">
<ul class="tabs">
    <li class="tab-link current" data-tab="tab-1" id="welcome_selector">Welcome</li>
    <li class="tab-link" data-tab="tab-2">Tab Two</li>
    <li class="tab-link" data-tab="tab-3">Tab Three</li>
    <li class="tab-link" data-tab="tab-4">Tab Four</li>
</ul> 
<div class="tabcontentcontainer">
<div id="tab-1" class="tab-content current"> <div class="bordertop_animate"> </div>welcome tab will be empty, save for the borders <div class="borderbottom_animate"></div></div>
<div id="tab-2" class="tab-content"><div class="bordertop_animate"></div>        tab 2 content<div class="borderbottom_animate"></div>  </div>
<div id="tab-3" class="tab-content"><div class="bordertop_animate"></div>        tab 3 content<div class="borderbottom_animate"></div>  </div>
<div id="tab-4" class="tab-content"><div class="bordertop_animate"></div>        tab 4 content<div class="borderbottom_animate"></div>  
</div>
</div>
</div>

CSS

.container {
width: 1000px;
min-height: 400px;
margin: 0 auto;
}

ul.tabs {
margin: 0px;
padding: 0px;
list-style: none;
background: #000;
vertical-align: middle;
font-weight: 400;  
color:#FFF;
text-align: right;
text-transform: uppercase;
font-size: 8px;
letter-spacing: 0.6px;
}

ul.tabs li {
background: #000;
vertical-align: middle;
font-weight: 400;  
color:#FFF;
text-align: right;
text-transform: uppercase;
font-size: 8px;
letter-spacing: 0.6px;
display: inline-block;
padding: 55px 15px 55px 15px;
cursor: pointer;
}

ul.tabs li.current {
background: #000;
color: #FFF;
}

#welcome_selector {
float: left;
padding-left: 128px;
 }

.tabcontentcontainer {
height: 400px;
width: 1000px;
background: url(http://placehold.it/1000x400) #000;
position: relative;
}

.tab-content {
display: none;
background: rgba(0, 0, 0, 0.0);
padding: 15px;
}

.tab-content.current {
display: inherit;
}

.bordertop_animate {
position: absolute;
height: 38px;
width: 966px;
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
border-bottom: 0px solid #FFF;
border-left: 2px solid #FFF;
}

.borderbottom_animate {
position: absolute;
bottom: 15px;
height: 38px;
width: 966px;
border-top: 0px solid #FFF;
border-right: 2px solid #FFF;
border-bottom: 2px solid #FFF;
border-left: 2px solid #FFF;
}

JS

$(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');
})

})

我希望第一个标签页的当前div高度保持为38px，但是我希望其他3个标签页的高度为185px-，但当选项卡被选中.动画类似于在div上应用:hover css选择器并进行0.5s过渡的情况，除了它会在选择选项卡时发生，而不是在鼠标悬停时发生.

I'd like for the first tab to keep current divs height which is 38px, however I'd like the other 3 tabs to have theirs at a height of 185px- but for the height to grow from 38px to 185px when the tab is selected. The animation would be similar to if the divs had a :hover css selector applied with a 0.5s transition, except it would happen when the tab is selected, not on mouseover.

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

Sorry if this isn't detailed or specific enough, this is my first time posting a question/and dealing with jquery.

推荐答案

这里是解决您的问题的jquery解决方案，以防万一您需要它.JS小提琴: http://jsfiddle.net/nPAhw/

Here is a jquery solution to your problem, just in case you need it. JS fiddle: http://jsfiddle.net/nPAhw/

html

<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>

css

#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;
}

jquery/javascript

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'});
});

这篇关于选择选项卡时更改div高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！