Question

<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>

是否可以使用.body-item first div中.heading和first的数据标签在.body-item second div内移动.heading当窗口宽度达到某个断点时，second的数据选项卡，并返回到另一个断点处的原始位置？

接受以下几行：

  $(window).on('resize', function() {
    var ww = $(window).width();
    if (ww <= 800) {
        // move inside divs
    } else {
     // move to original positions
    }
  })

如果是这样，我怎么能实现这样的目标？

Answer 1

嗯，你需要appendTo将源元素中的文本添加到目标元素中，在你的情况下

$(".body-item.first").appendTo(".heading[data-tab='first']")

其他元素也一样

＆＃13;

$(".body-item.first").appendTo(".heading[data-tab='first']")


$(".body-item.second").appendTo(".heading[data-tab='second']")

＆＃13;

<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>

＆＃13;

在特定div中移动div并在某些断点处再次移回div

1 个答案: