点击DIV追加至目标容器并实现类Tabs切换功能的问题求助

我来帮你搞定这个问题！你现在的核心问题有两个：一是每次点击都会重复克隆并追加新元素到.selected-day容器里，导致内容越积越多；二是选中状态的切换逻辑没处理好，所有克隆出来的元素都被加上了selected类，自然就全部显示了。咱们一步步调整：

第一步：给每个日期内容加唯一标识 #

先给原始的.day-col-content加上唯一的data-date-id属性，这样我们就能判断某个日期的内容是否已经被克隆过，避免重复添加：

<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" data-date-id="1">
 <p class="weather"> content 1 </p>
 </div>
 </div>
 <div class="day-col">
 <div class="day-col-content" data-date-id="2">
 <p class="weather"> content 2 </p>
 </div>
 </div>
 <div class="day-col">
 <div class="day-col-content" data-date-id="3">
 <p class="weather"> content 3 </p>
 </div>
 </div>
</div>

第二步：重构JS逻辑，实现“存在则切换，不存在则克隆” #

修改点击事件的逻辑，先检查目标日期的内容是否已经在.selected-day里，没有的话再克隆追加；同时只给当前选中的克隆元素添加selected类，其他的移除：

$('.day-col-content').on('click', function() {
  // 1. 标记左侧选中的日期块
  $('.day-col').removeClass('selected');
  $(this).parent().addClass('selected');

  // 2. 获取当前日期的唯一ID
  const dateId = $(this).data('date-id');
  // 3. 检查.selected-day里是否已有该日期的内容
  const $targetContent = $('.selected-day .day-col-content[data-date-id="' + dateId + '"]');

  if ($targetContent.length === 0) {
    // 4. 如果没有，克隆并追加，同时保留ID标识
    const $clonedContent = $(this).clone();
    $clonedContent.appendTo('.selected-day');
  }

  // 5. 切换选中状态：隐藏所有内容，只显示当前选中的
  $('.selected-day .day-col-content').removeClass('selected');
  $('.selected-day .day-col-content[data-date-id="' + dateId + '"]').addClass('selected');
});

第三步：调整CSS，确保样式生效 #

原CSS的选择器有点小问题，把.selected-day .selected-day这个错误选择器删掉，同时确保.selected-day下的内容默认隐藏，只有选中的才显示：

.actual-weather { 
  float: left; 
  width: 100%; 
  margin-bottom: 20px; 
  text-align: center; 
}

.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%);
}

效果说明 #

现在点击左侧的日期块：

• 如果是第一次点击，会把对应的内容克隆到.selected-day里并显示；
• 如果是已经克隆过的日期，直接切换显示该内容，不会重复添加；
• 左侧的选中日期块会同步高亮，右侧只显示当前选中的日期内容，完美实现Tabs切换效果。

内容的提问来源于stack exchange，提问作者alench