我对使用可点击的div在div下方的区域中显示文本/内容有疑问。单击div行下方的div即可显示内容。
请在以下jsfiddle中查看布局:https://jsfiddle.net/4fwwevaf/
问题是:
如何使上面的div按钮在较小的设备/较小的窗口中重新排列。具体来说,我希望这些标签重新排列,以便在每个标签标题下方显示适当的内容,例如:
<div class="tabBox-3">Tab 1</div>
<div class="divText" id="div1">
<h1>Tab 1 content</h1>
<p>Tab 1 content text</p>
</div>
<div class="tabBox-3">Tab 2</div>
<div class="divText" id="div2">
<h1>Tab 2 content</h1>
<p>Tab 2 content text</p>
</div>
<div class="tabBox-3">Tab 3</div>
<div class="divText" id="div3">
<h1>Tab 3 content</h1>
<p>Tab 3 content text</p>
</div>
或如以下小提琴所示:https://jsfiddle.net/z1je8p38/
有办法做到这种效果吗?还是我的整个方法很糟糕?
任何帮助表示赞赏。
最佳答案
一种方法是还将选项卡添加到divText div的内部,将其默认设置为隐藏,直到您希望它切换到另一个视图为止。然后隐藏原始选项卡。
CSS可能是这样的...
.divText .tabBox-3{display:none;}
@media screen and (max-width: 480px) {
.tabBox-3{
width:100%;
}
.tabRow{
display:none;
}
.divText>.tabBox-3{
display:block;
}
.divText{
display:block !important;
}
}
然后您的divText块将像这样...
<div class="divText" id="div1">
<div class="tabBox-3">
Tab 1
</div>
<h1> Div 1 content</h1>
<p> div 1 content text</p>
</div>
看到我的小提琴... https://jsfiddle.net/4fwwevaf/3/您显然可以在以后添加手风琴功能。