Превратите две колонки во вкладки

Question

Хорошо, сейчас у меня есть два столбца, которые отображают кучу сообщений и данных. Прямо сейчас на рабочем столе они плавают влево и вправо. То, что я хочу сделать, это превратить эти столбцы в вкладки, когда на мобильном телефоне. Так что для страховки это идет с рабочего стола, как это

column1                   column2
 11111                     22222
 11111                     22222
 11111                     22222

чтобы когда он был на мобильном телефоне, он пошел бы

column1 | colum2

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

Вот еще один метод, который использует некоторые псевдо-селекторы, такие как :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>

Answer 2

Вот простое решение с использованием только 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>