Question

好的，现在我有两列显示一堆帖子和数据。现在在桌面上，我让它们左右浮动。我想做的是在移动设备上时将这些列变成标签。因此，保险起见，它是从这样的台式机上

column1                   column2
 11111                     22222
 11111                     22222
 11111                     22222

当它在移动设备上时它将消失

column1 | colum2

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和~选择器，您可以根据单选按钮的选择来设置同级元素的样式。

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

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

Answer 2

这是另一种使用一些伪选择器的方法，例如:not()和:target

此方法的缺点是，默认情况下，均不会显示任何一列，因此可能不是您想要的此页面。

.tabs {
  display: flex;
  width: 100%;
}

.tabs .tab {
  border: 2px solid lightgrey;
  border-width: 0 0 2px 0;
  padding: 5px 10px;
  color: grey
}

.tabs .tab a {
  color: grey;
  text-decoration: none;
}

.tabs .tab a:hover {
  text-decoration: underline;
}

.tabs .tab a:link {
  color: grey;
}

.tabs .tab+.tab {
  border-width: 0 0 2px 1px;
}

.tab-panel:target {
  display: block;
}

.tab-panel:not(:target) {
  display: none;
}

<div class="dash">
  <!-- Only display labels on mobile -->
  <div class="tabs">
    <div class="tab">
      <a href="#col1">
        Column 1
      </a>
    </div>
    <div class="tab">
      <a href="#col2">
        Column 1
      </a>
    </div>
  </div>

  <section class="tab-panel" id="col1">
    1111<br> 1111
    <br> 1111
    <br>
  </section>
  <section class="tab-panel" id="col2">
    2222<br> 2222
    <br> 2222
    <br>
  </section>
</div>

将两栏变成标签

2 个答案: