1
これは非常に簡単なので、完全にバッフルされています。私はjqueryのタブ構造を持っています。最初のタブの中に、黄色のボックスとして表示されるdivコンテナを挿入しました。この黄色いボックスdivの中にdivを挿入しようとしています。コンテナは赤いボックスとして表示されます。タブ内の別のdivコンテナ内にdivコンテナを配置する方法
しかし、黄色のボックスの内側に赤色のボックスが表示されません。私は通常の位置とZインデックスなどを試みたが、奇妙なことに何も働かない。私は明らかに目が見えなくなったと思う。
フィドル：あなたが使用しているすべての非アクティブのタブを非表示にするには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>
が非常によく見えます。あなたの助けを非常に感謝します。 – Silverburch
あなたは歓迎です:) – kukkuz