<div class="result-display">
<div class="results-heading">
<div class="heading active" data-tab="first">First</div>
<div class="heading" data-tab="second">Second</div>
</div>
<div class="results-body">
<div class="body-item first current">
"Text for first item"
</div>
<div class="body-item second">
"Text for second item"
</div>
</div>
</div>
是否可以使用 first
和 的数据选项卡将
,当窗口宽度到达某个断点时,数据选项卡为 .body-item first
移动到 .heading
div 内.heading
div 内的 >.body-item secondarysecond
,并返回到其另一个断点处的原始位置?
一些内容:
$(window).on('resize', function() {
var ww = $(window).width();
if (ww <= 800) {
// move inside divs
} else {
// move to original positions
}
})
如果是这样,我怎样才能实现这样的目标?
最佳答案
好吧,你只需要appendTo
根据您的情况,将文本从源元素添加到目标元素
$(".body-item.first").appendTo(".heading[data-tab='first']")
其他元素也是如此
$(".body-item.first").appendTo(".heading[data-tab='first']")
$(".body-item.second").appendTo(".heading[data-tab='second']")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="result-display">
<div class="results-heading">
<div class="heading active" data-tab="first">First</div>
<div class="heading" data-tab="second">Second</div>
</div>
<div class="results-body">
<div class="body-item first current">
"Text for first item"
</div>
<div class="body-item second">
"Text for second item"
</div>
</div>
</div>
关于javascript - 将 div 移至特定 div 内,并在某些断点处再次移回,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50668475/