Girar dos columnas en pestañas

votos
0

Bueno por lo que en este momento tengo dos columnas que muestran un montón de mensajes y datos. En este momento en el escritorio tengo flotando izquierda y derecha. Lo que estoy tratando de hacer es convertir esas columnas en pestañas cuando en el móvil. Así que para insance que va desde el escritorio como esto

column1                   column2
 11111                     22222
 11111                     22222
 11111                     22222

que cuando está en el móvil sería ir

column1 | colum2

1111

1111

1111

Entonces podría hacer clic en la pestaña columna2 y me gustaría ver los mensajes muestran por columna2.

Aquí es cómo tengo mi configuración de página

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

Y de nuevo sólo tengo tanto flotante a la izquierda y la derecha.

Publicado el 07/11/2018 a las 22:29
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
1

Aquí hay otro método que utiliza algunos selectores de pseudo como :not()y:target

La desventaja de esto es que por defecto se muestra ninguna de las columnas, por lo que puede no ser lo que quería para esta página.

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

Respondida el 08/11/2018 a las 00:37
fuente por usuario

votos
1

Aquí es una solución sencilla utilizando sólo CSS. Mediante la utilización de las :checkedy ~los selectores puede estilo de elementos relacionados en base a la selección del botón de radio.

Tendrá que ocultar las etiquetas cuando no esté en su punto de vista móvil.

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

Respondida el 08/11/2018 a las 00:10
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more