javascript - 将两列变成选项卡

Question

好的，现在我有两列显示一堆帖子和数据。现在在桌面上，我让它们左右浮动。我想要做的是在移动设备上将这些列变成选项卡。因此，例如，它像这样从桌面上运行

column1                   column2
 11111                     22222
 11111                     22222
 11111                     22222

当它在移动设备上时，它会去

第 1 列|第 2 列

1111

1111

1111

然后我可以单击 column2 选项卡，我会看到显示 column2 的帖子。

这是我的页面设置

 <section className-"dash">
  <section className="dashboard-container-left">
      <section className="myRecommended">
        .........
        .........
      </section>
  </section>
  <section className="dashboard-container-right">
      <section className="usersRecommended">
        .........
        .........
      </section>
  </section>
 </section>

同样，我只是左右浮动。

Answer 1

这是一个仅使用 CSS 的简单解决方案。通过使用 :checked 和 ~ 选择器，您可以根据单选按钮选择设置同级元素的样式。

当不在您的移动 View 中时，您需要隐藏标签。

.tab-panel {
  /* apply these styles in mobile ony */
  float: none;
  display: none;
}

input[name="tabs"] {
  display: none;
}

input[name="tabs"]:checked + label {
  font-weight: bold;
}

input[id="tab1"]:checked ~ .tab-panel#col1 {
  display: block;
}

input[id="tab2"]:checked ~ .tab-panel#col2 {
  display: block;
}

<div class="dash">
  <!-- Only display labels on mobile -->
  <input type="radio" name="tabs" id="tab1" checked>  
  <label for="tab1" role="tab" aria-controls="col1">Col 1</label> 
  <input type="radio" name="tabs" id="tab2">  
  <label for="tab2" role="tab" aria-controls="col2">Col 2</label>  
  
  <section class="tab-panel dashboard-container-left" id="col1">
    1111<br>
    1111<br>
    1111<br>
  </section>
  <section class="tab-panel dashboard-container-left" id="col2">
    2222<br>
    2222<br>
    2222<br>
  </section>
</div>