前端实现标签栏切换只用一个div接收切换的数据

可以使用CSS的伪类选择器来实现标签栏切换，通过给每个标签设置不同的id，然后利用CSS的伪类选择器来控制显示和隐藏。具体实现方法可以参考以下代码：

HTML代码：

<div class="tag-container">
  <div id="tag1" class="tag">标签1</div>
  <div id="tag2" class="tag">标签2</div>
  <div id="tag3" class="tag">标签3</div>
  <div id="tag4" class="tag">标签4</div>
</div>

<div id="content" class="content"></div>

CSS代码：

/* 定义标签样式 */
.tag-container {
  display: flex;
  justify-content: space-between;
}
.tag {
  padding: 10px;
  cursor: pointer;
  border: 1px solid #ccc;
}

/* 定义内容样式 */
.content {
  padding: 10px;
  border: 1px solid #ccc;
}

/* 定义伪类选择器 */
#tag1:hover ~ #content {
  display: none;
}
#tag2:hover ~ #content {
  display: none;
}
#tag3:hover ~ #content {
  display: none;
}
#tag4:hover ~ #content {
  display: none;
}

/* 定义选中标签样式 */
#tag1:active ~ #content {
  display: block;
}
#tag2:active ~ #content {
  display: block;
}
#tag3:active ~ #content {
  display: block;
}
#tag4:active ~ #content {
  display: block;
}

通过上述代码，我们可以实现标签栏的切换，当鼠标移动到标签上时，对应的内容会隐藏，当点击标签时，对应的内容会显示。同时，我们只需要一个div元素来接收切换的数据。