功能类似于选项卡，但场景是附加到另一个 div

Question

$('.day-col-content').each(function() {
    $(this).on('click', function() {

      $('.day-col').removeClass('selected')
      $(this).parent().addClass('selected');
      $(this).clone().appendTo('.selected-day');
      $('.selected-day .day-col-content').addClass('selected');
    });
  });

.actual-weather {
    float: left;
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .selected-day .selected-day {
    float: left;
    width: 100%;
  }
  
  .selected-day .day-col-content {
    display: none;
  }
  
  .selected-day .day-col-content.selected {
    display: block
  }
  
  .days-box {
    float: left;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .day-col {
    float: left;
    width: 130px;
    height: 130px;
    position: relative;
    margin: 0 10px 10px;
    text-align: center;
    cursor: pointer;
    background:red;
  }

  .day-col.selected {
    background:blue;
  }

  
  .day-col .day-col-content {
    width: 100%;
    position: absolute;
    margin: 0;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="actual-weather">
  <span class="selected-day"></span>
</div>
<div class="days-box">
  <div class="day-col">
    <div class="day-col-content">
      <p class="weather">
        content 1
      </p>
    </div>
  </div>
  <div class="day-col">
    <div class="day-col-content">
      <p class="weather">
        content 2
      </p>
    </div>
  </div>
  <div class="day-col">
    <div class="day-col-content">
      <p class="weather">
        content 3
      </p>
    </div>
  </div>
  <div>

我想点击特定的 div 然后这个 div 附加到另一个 div（选定的日期）

然后我想在附加的 div 之间切换以显示选定的 div（天）（用于选项卡等功能）。

问题是所有 div 都在显示，我不知道如何管理选择的那些 divs

有人知道如何实现吗？

Answer 1

你需要先清空div然后追加DATA或者直接使用.html()它会覆盖数据：

$('.selected-day').html('').append( $(this).clone() );
//OR
$('.selected-day').html( $(this).clone() );

注意： 您不必循环使用 .each() 将点击事件附加到所有 div 只需直接使用选择器即可:

$('.day-col-content').on('click', function() {
    ...
});

样本

$('.day-col-content').on('click', function() {
    $('.day-col').removeClass('selected');
    $(this).parent().addClass('selected');
    $('.selected-day').html($(this).clone());
});

.selected-day {
  background-color: yellow
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="day-col">
  <div class="day-col-content">
    <p class="weather">
      day 1
    </p>
  </div>
</div>
<div class="day-col">
  <div class="day-col-content">
    <p class="weather">
      day 2
    </p>
  </div>
</div>
<div class="day-col">
  <div class="day-col-content">
    <p class="weather">
      day 3
    </p>
  </div>
  <hr>

  <div class="selected-day"></div>

Answer 2

您好，我不确定您的样式，但这可以用作自定义标签版本

$(document).on('click','.day-col-content',function(){
    $('.day-col').removeClass('selected')
    $(this).parent('.day-col').addClass('selected');
    $('.selected-day').html($(this).clone());
    $('.selected-day .day-col-content').addClass('selected');
});

.day-col.selected {
  color:green
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="day-col">
    <div class="day-col-content">
        <p class="weather">
        content 1
        </p>
    </div>
</div>
<div class="day-col">
    <div class="day-col-content">
        <p class="weather">
        content 2
        </p>
    </div>
</div>
<div class="day-col">
    <div class="day-col-content">
        <p class="weather">
        content 3
        </p>
    </div>
</div>

<div class="selected-day"></div>

功能类似于选项卡，但场景是附加到另一个 div

Functionality like tabs but scenario with appending to another div

javascript

jquery

tabs

append