Как разместить контейнер div внутри другого контейнера div, в пределах вкладки

Question

Полностью сбит с толку, потому что это должно быть так просто. У меня есть структура вкладки jquery. В первой вкладке я вставил контейнер div, который отображается как желтый ящик. Внутри этого желтого прямоугольника div я пытаюсь вставить div. контейнер, который отображается как красная коробка.

Но я не могу получить красную рамку, чтобы появиться внутри желтой коробки. Я пробовал обычное позиционирование и z-index и т. Д., Но странно ничего не работает. Я думаю, что я стал слепым к очевидному.

Fiddle: https://jsfiddle.net/k1kphcm8/

$('.tabs-nav a').on('click', function(event) { 
 
    event.preventDefault(); 
 

 
    $('.tab-active').removeClass('tab-active'); 
 
    $(this).parent().addClass('tab-active'); 
 
    $('.TabContainerClass div').hide(); 
 
    $($(this).attr('href')).fadeIn(300) 
 
}); 
 

 
$('.tabs-nav a:first').trigger('click'); // Default

.tabs-nav { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.tabs-nav .tab-active a { 
 
    background: white; 
 
    font-size: 13px; 
 
    border-width: 1px; 
 
    border-bottom-color: white; 
 
    border-top-color: darkorange; 
 
    border-left-color: darkorange; 
 
    border-right-color: darkorange; 
 
} 
 
.tabs-nav a { 
 
    border-width: 0px 1px 1px 0px; 
 
    border-style: solid; 
 
    border-bottom-color: darkorange; 
 
    border-right-color: #C9C9C9; 
 
    background: #E6E6E6; 
 
    color: #7A7A7A; 
 
    display: block; 
 
    font-size: 12px; 
 
    height: 32px; 
 
    line-height: 32px; 
 
    text-align: center; 
 
    width: 122px; 
 
} 
 
.tabs-nav li { 
 
    float: left; 
 
} 
 
.TabContainerClass { 
 
    width: 491px; 
 
    height: 250px; 
 
    border: 1px solid darkorange; 
 
    border-top: 0; 
 
    clear: both; 
 
    position: relative; 
 
    background: white; 
 
} 
 
.YellowDivClass { 
 
    position: absolute; 
 
    background-color: yellow; 
 
    width: 350px; 
 
    height: 200px; 
 
    margin: 30px 0px 0px 20px; 
 
    z-index: 1; 
 
} 
 
.RedDivClass { 
 
    position: absolute; 
 
    background-color: red; 
 
    z-index: 10; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<ul class="tabs-nav"> 
 
    <li class="tab-active"><a href="#YellowDiv" rel="nofollow">Countries</a> 
 
    </li> 
 

 
    <li class=""><a href="#tab-2" rel="nofollow">Year</a> 
 
    </li> 
 
    <li class=""><a href="#tab-3" rel="nofollow">Materials</a> 
 
    </li> 
 
    <li class=""><a href="#tab-4" rel="nofollow">Products</a> 
 
    </li> 
 
</ul> 
 

 

 
<div class="TabContainerClass"> 
 

 
    <div id="YellowDiv" class="YellowDivClass"> 
 
    <div id="RedDiv" class="RedDivClass"></div> 
 
    </div> 
 

 

 
    <div id="tab-2" style="display: none;"> 
 
    <p>This is TAB 2</p> 
 
    </div> 
 

 
    <div id="tab-3" style="display: none;"> 
 
    <p>This is TAB 3.</p> 
 
    </div> 
 

 
    <div id="tab-4" style="display: none;"> 
 
    <p>This is TAB 4.</p> 
 
    </div> 
 

 
</div>

Answer 1

Чтобы скрыть все неактивные вкладки, которые вы используете:

$('.TabContainerClass div').hide(); 

который скрывает все дивы внутри TabContainerClass WHI ch не предназначен. Вместо того, чтобы использовать эту функцию, чтобы скрыть только прямые дети из TabContainerClass:

$('.TabContainerClass > div').hide(); 

UPDATED FIDDLE

$('.tabs-nav a').on('click', function(event) { 
 
    event.preventDefault(); 
 

 
    $('.tab-active').removeClass('tab-active'); 
 
    $(this).parent().addClass('tab-active'); 
 
    $('.TabContainerClass > div').hide(); 
 
    $($(this).attr('href')).fadeIn(300) 
 
}); 
 

 
$('.tabs-nav a:first').trigger('click'); // Default

.tabs-nav { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.tabs-nav .tab-active a { 
 
    background: white; 
 
    font-size: 13px; 
 
    border-width: 1px; 
 
    border-bottom-color: white; 
 
    border-top-color: darkorange; 
 
    border-left-color: darkorange; 
 
    border-right-color: darkorange; 
 
} 
 
.tabs-nav a { 
 
    border-width: 0px 1px 1px 0px; 
 
    border-style: solid; 
 
    border-bottom-color: darkorange; 
 
    border-right-color: #C9C9C9; 
 
    background: #E6E6E6; 
 
    color: #7A7A7A; 
 
    display: block; 
 
    font-size: 12px; 
 
    height: 32px; 
 
    line-height: 32px; 
 
    text-align: center; 
 
    width: 122px; 
 
} 
 
.tabs-nav li { 
 
    float: left; 
 
} 
 
.TabContainerClass { 
 
    width: 491px; 
 
    height: 250px; 
 
    border: 1px solid darkorange; 
 
    border-top: 0; 
 
    clear: both; 
 
    position: relative; 
 
    background: white; 
 
} 
 
.YellowDivClass { 
 
    position: absolute; 
 
    background-color: yellow; 
 
    width: 350px; 
 
    height: 200px; 
 
    margin: 30px 0px 0px 20px; 
 
    z-index: 1; 
 
} 
 
.RedDivClass { 
 
    position: absolute; 
 
    background-color: red; 
 
    z-index: 10; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 

 
<ul class="tabs-nav"> 
 
    <li class="tab-active"><a href="#YellowDiv" rel="nofollow">Countries</a> 
 
    </li> 
 

 
    <li class=""><a href="#tab-2" rel="nofollow">Year</a> 
 
    </li> 
 
    <li class=""><a href="#tab-3" rel="nofollow">Materials</a> 
 
    </li> 
 
    <li class=""><a href="#tab-4" rel="nofollow">Products</a> 
 
    </li> 
 
</ul> 
 

 

 
<div class="TabContainerClass"> 
 

 
    <div id="YellowDiv" class="YellowDivClass"> 
 
    <div id="RedDiv" class="RedDivClass"></div> 
 
    </div> 
 

 

 
    <div id="tab-2" style="display: none;"> 
 
    <p>This is TAB 2</p> 
 
    </div> 
 

 
    <div id="tab-3" style="display: none;"> 
 
    <p>This is TAB 3.</p> 
 
    </div> 
 

 
    <div id="tab-4" style="display: none;"> 
 
    <p>This is TAB 4.</p> 
 
    </div> 
 

 
</div>

Answer 2

Проблема одна из ваших селекторов. Вы занимаетесь каждым элементом div вместо скрытых только прямых элементов div. Итак, вместо $('.TabContainerClass div').hide();. Вы должны иметь $('.TabContainerClass > div').hide();