如何在选项卡内将 div 容器放在另一个 div 容器中

Question

完全困惑，因为这应该如此简单。我有一个 jquery 选项卡结构。在第一个选项卡中，我插入了一个显示为黄色框的 div 容器。在这个黄色框 div 内，我试图插入一个 div。显示为红色框的容器。

但我无法让红色框出现在黄色框内。我已经尝试过通常的定位和 z-index 等，但奇怪的是没有任何效果。我想我已经对显而易见的事情视而不见了。

小提琴：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 内的 div，这不是有意的。而是使用它来仅隐藏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();