Foros del Web » Creando para Internet » HTML »

Grupo de pestañas en la misma página

Estas en el tema de Grupo de pestañas en la misma página en el foro de HTML en Foros del Web. Muy buenas chicos, ante todo gracias por la ayuda que siempre me habéis prestado en las pequeñas dudas que van surgiendo. El tema es el ...
  #1 (permalink)  
Antiguo 11/09/2013, 08:53
 
Fecha de Ingreso: agosto-2010
Mensajes: 202
Antigüedad: 11 años, 5 meses
Puntos: 4
Pregunta Grupo de pestañas en la misma página

Muy buenas chicos, ante todo gracias por la ayuda que siempre me habéis prestado en las pequeñas dudas que van surgiendo.

El tema es el siguiente:

Quiero modificar un recurso de pestañas en html para poder utilizar varios tabs groups dentro de una misma página, el caso es que ya tengo "algo", pero quiero optimizarlo sin llegar a recurrir a javascript...

Este es el html del que dispongo...

Código HTML:
Ver original
  1. <div class="tabGroup">
  2.     <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked"/>
  3.     <label for="rad1">Tab 1</label>
  4.  
  5.     <input type="radio" name="tabGroup1" id="rad2" class="tab2"/>
  6.     <label for="rad2">Tab 2</label>
  7.      
  8.     <input type="radio" name="tabGroup1" id="rad3" class="tab3"/>
  9.     <label for="rad3">Tab 3</label>
  10.      
  11.     <br/>
  12.  
  13.     <div class="tab1">Tab 1 content</div>
  14.     <div class="tab2">Tab 2 content</div>
  15.     <div class="tab3">Tab 3 content</div>
  16. </div>
Código CSS:
Ver original
  1. /* This matchs tabs displaying to thier associated radio inputs */
  2. .tab1:checked ~ .tab1, .tab2:checked ~ .tab2, .tab3:checked ~ .tab3 {
  3.     display: block;
  4. }

Con este código, muestro que check tengo marcado...

Mi pregunta es, si tengo X grupos de tabs en la misma página ¿cómo puedo evitar el tener que llevar la "cuenta" y completar el css con "tab1:checked ~ .tab1, tabX:checked ~ .tabX...?

Me gustaria tener grupos de tabs:

Código HTML:
Ver original
  1. <div class="tabGroup">
  2.     <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked"/>
  3.     <label for="rad1">Tab 1</label>
  4.  
  5.     <input type="radio" name="tabGroup1" id="rad2" class="tab2"/>
  6.     <label for="rad2">Tab 2</label>
  7.      
  8.     <input type="radio" name="tabGroup1" id="rad3" class="tab3"/>
  9.     <label for="rad3">Tab 3</label>
  10.      
  11.     <br/>
  12.  
  13.     <div class="tab1">Tab 1 content</div>
  14.     <div class="tab2">Tab 2 content</div>
  15.     <div class="tab3">Tab 3 content</div>
  16. </div>
  17. <div class="tabGroup2">
  18.     <input type="radio" name="tabGroup2" id="rad1" class="tab1" checked="checked"/>
  19.     <label for="rad1">Tab 1</label>
  20.  
  21.     <input type="radio" name="tabGroup2" id="rad2" class="tab2"/>
  22.     <label for="rad2">Tab 2</label>
  23.      
  24.     <input type="radio" name="tabGroup2" id="rad3" class="tab3"/>
  25.     <label for="rad3">Tab 3</label>
  26.      
  27.     <br/>
  28.  
  29.     <div class="tab1">Tab 1 content</div>
  30.     <div class="tab2">Tab 2 content</div>
  31.     <div class="tab3">Tab 3 content</div>
  32. </div>
  33. <div class="tabGroup3">
  34.     <input type="radio" name="tabGroup3" id="rad1" class="tab1" checked="checked"/>
  35.     <label for="rad1">Tab 1</label>
  36.  
  37.     <input type="radio" name="tabGroup3" id="rad2" class="tab2"/>
  38.     <label for="rad2">Tab 2</label>
  39.      
  40.     <input type="radio" name="tabGroup3" id="rad3" class="tab3"/>
  41.     <label for="rad3">Tab 3</label>
  42.      
  43.     <br/>
  44.  
  45.     <div class="tab1">Tab 1 content</div>
  46.     <div class="tab2">Tab 2 content</div>
  47.     <div class="tab3">Tab 3 content</div>
  48. </div>

Algo así y de esta forma poder simplificar el css. Me gustaría evitar el tema de jquery y javascript...

Gracias de nuevo chicos
  #2 (permalink)  
Antiguo 11/09/2013, 13:08
 
Fecha de Ingreso: agosto-2013
Mensajes: 46
Antigüedad: 8 años, 4 meses
Puntos: 12
Respuesta: Grupo de pestañas en la misma página

1º: cambiando el html

Código HTML:
Ver original
  1. <label for="rad3">Tab 3</label>
  2.     <input type="radio" name="tabGroup1" id="rad3" class="tab3"/>
  3.     <div class="tab">Tab content</div>

2º: una regla tipo
Código CSS:
Ver original
  1. input:checked + .tab {
  2.  
  3.     }
cambiando el selector de hermano (~) por el de adyacente
Con esto ultimo ya no hay que dar una clase diferente a cada div

No probado ni codificado, asi que ya dira
  #3 (permalink)  
Antiguo 11/09/2013, 14:27
 
Fecha de Ingreso: agosto-2010
Mensajes: 202
Antigüedad: 11 años, 5 meses
Puntos: 4
Respuesta: Grupo de pestañas en la misma página

Muchas gracias, en cuanto pueda lo pruebo y comento.

Saludos y gracias por la pronta respuesta.
  #4 (permalink)  
Antiguo 12/09/2013, 02:53
 
Fecha de Ingreso: agosto-2010
Mensajes: 202
Antigüedad: 11 años, 5 meses
Puntos: 4
Respuesta: Grupo de pestañas en la misma página

Buenas de nuevo chicos, intentando lo comentado en el post no funciona, sigue dando el fallo de que al pulsar la pestaña 2.1 del segundo tabGroup me abre la 1.1 y así sucesivamente...

Gracias por la ayuda

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html lang="es" xml:lang="es" xmlns="http://www.w3.org/1999/xhtml">
  3.     <title>TAB GROUP</title>
  4. </head>
  5.  
  6. <link rel="stylesheet" type="text/css" href="solapas.css" />
  7.  
  8.  
  9.     <div class="tabGroup" id="tabGroup1">
  10.         <input type="radio" name="tabGroup1" id="rad1" checked="checked" class="tab1"/>
  11.         <label for="rad1">Esto es una prueba</label>
  12.         <div class="tab"><p>primera pestaña 1</p></div>
  13.        
  14.         <input type="radio" name="tabGroup1" id="rad2" class="tab2"/>
  15.         <label for="rad2">Prueba 2</label>
  16.         <div class="tab"><p>primera pestaña 2</p></div>
  17.    
  18.         <input type="radio" name="tabGroup1" id="rad3" class="tab3"/>
  19.         <label for="rad3">PRUEBA 3</label>
  20.         <div class="tab"><p>primera pestaña 3</p></div>
  21.  
  22.         <input type="radio" name="tabGroup1" id="rad4" class="tab4"/>
  23.         <label for="rad4">Prueba 4</label>
  24.         <div class="tab"><p>primera pestaña 4</p></div>
  25.    
  26.     <br/>
  27.     </div>
  28.  
  29. <p>Salto de línea</p>
  30.  
  31.     <div class="tabGroup" id="tabGroup2">
  32.         <input type="radio" name="tabGroup2" id="rad1" checked="checked" class="tab1"/>
  33.         <label for="rad1">2.1</label>
  34.         <div class="tab"><p>segunda pestaña 1</p></div>
  35.        
  36.         <input type="radio" name="tabGroup2" id="rad2" class="tab2"/>
  37.         <label for="rad2">2.2</label>
  38.         <div class="tab"><p>segunda pestaña 2</p></div>
  39.    
  40.         <input type="radio" name="tabGroup2" id="rad3" class="tab3"/>
  41.         <label for="rad3">2.3</label>
  42.         <div class="tab"><p>segunda pestaña 3</p></div>
  43.  
  44.         <input type="radio" name="tabGroup2" id="rad4" class="tab4"/>
  45.         <label for="rad4">2.4</label>
  46.         <div class="tab"><p>segunda pestaña 4</p></div>
  47.    
  48.     <br/>
  49.     </div>
  50. </body>
  51. </html>

Código CSS:
Ver original
  1. input:checked + .tab{
  2.     display: block;
  3. }

seguiré intentándolo. Gracias de antemano por vuestra colaboración.
  #5 (permalink)  
Antiguo 13/09/2013, 04:33
 
Fecha de Ingreso: agosto-2013
Mensajes: 46
Antigüedad: 8 años, 4 meses
Puntos: 12
Respuesta: Grupo de pestañas en la misma página

Con el ultimo html ese css no deberia funcionar. Habra otro css funcionando y es el que abre el tab que no debe

el orden en el html debe ser = label input .tab para que funcione el selector de adyacente (+)

ademas esta repitiendo ids en los inputs
  #6 (permalink)  
Antiguo 13/09/2013, 10:23
 
Fecha de Ingreso: agosto-2010
Mensajes: 202
Antigüedad: 11 años, 5 meses
Puntos: 4
Respuesta: Grupo de pestañas en la misma página

Buenas de nuevo, gracias por la ayuda.

Código CSS:
Ver original
  1. /* Set the size and font of the tab widget */
  2. .tabGroup {
  3.     font-family: 'Verdana',Helvetica,sans-serif;
  4.     font-size: .8em;
  5.     margin: 0 auto;
  6.     background: none repeat scroll 0 0 #F3F1EB;
  7.     border: 1px solid #DEDBD1;
  8.     padding: 10px;
  9.     width: 600px;
  10.     height: auto;
  11.     text-align: justify;
  12.     color: #385c5b;
  13. }
  14. :adios:
  15. .tabGroupTexto {
  16.     font-family: 'Verdana',Helvetica,sans-serif;
  17.     font-size: .8em;
  18.     margin: 0 auto;
  19.     background: none repeat scroll 0 0 #F3F1EB;
  20.     border: 1px solid #DEDBD1;
  21.     padding: 10px;
  22.     width: 600px;
  23.     height: auto;
  24.     text-align: justify;
  25.     color: #385c5b;
  26. }
  27.  
  28. .tabGroup > label {
  29.     cursor: pointer;
  30. }
  31.  
  32. /* Configure the radio buttons to hide off screen */
  33. .tabGroup > input[type="radio"] {
  34.     position: fixed;
  35.     left:-100px;
  36.     top:-100px;
  37. }
  38.  
  39. /* Configure labels to look like tabs */
  40. .tabGroup > input[type="radio"] + label {
  41.     /* inline-block such that the label can be given dimensions */
  42.     display: inline-block;
  43.  
  44.     /* A nice curved border around the tab */
  45.     border: 1px solid #DEDBD1;
  46.     border-radius: 5px 5px 0 0;
  47.     -moz-border-radius: 5px 5px 0 0;
  48.     -webkit-border-radius: 5px 5px 0 0;
  49.  
  50.     /* the bottom border is handled by the tab content div */
  51.     border-bottom: 0;
  52.  
  53.     /* Padding around tab text */
  54.     padding: 5px 10px;
  55.  
  56.     /* Set the background color to default gray (non-selected tab) */
  57.     background-color:#ddd;
  58. }
  59.  
  60. /* Focused tabs need to be highlighted as such */
  61. .tabGroup > input[type="radio"]:focus + label {
  62.     border:1px dashed #DEDBD1;
  63. }
  64.  
  65. /* Checked tabs must be white with the bottom border removed */
  66. .tabGroup > input[type="radio"]:checked + label {
  67.     background-color:white;
  68.     font-weight: bold;
  69.     border-bottom: 1px solid white;
  70.     margin-bottom: -1px;
  71. }
  72.  
  73. /* The tab content must fill the widgets size and have a nice border */
  74. .tabGroup > div {
  75.     display: none;
  76.     border: 1px solid #DEDBD1;
  77.     background-color: white;
  78.     padding: 10px 20px;
  79.     height: 81%;
  80.     overflow: auto;
  81.     margin-top: -1px;
  82.  
  83.     border-radius: 0 5px 5px 5px;
  84.     -moz-border-radius: 0 5px 5px 5px;
  85.     -webkit-border-radius: 0 5px 5px 5px;
  86.  
  87.     box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
  88. }
  89.  
  90. .tabGroup > div img {
  91.     float: right;
  92.         padding-left: 15px;
  93.     /*border: 1px solid black;*/
  94. }
  95.  
  96.     /* This matchs tabs displaying to thier associated radio inputs */
  97.     .tab1:checked ~ .tab1, .tab2:checked ~ .tab2, .tab3:checked ~ .tab3 {
  98.         display: block;
  99.     }

Este es el único css al que llamo... ya he probado el orden label input .tab y el adyacente + en el css y no me dibuja bien los tabs.

La idea es no tener que repetir los ids en los inputs, sino de alguna forma tener un tabGroup1 (rad1,rad2...), tabGroup2(rad1,rad2...) y evitar tener en el css
Código CSS:
Ver original
  1. #rad1:checked ~ .tab1,
  2. #rad2:checked ~ .tab2,
  3. #rad3:checked ~ .tab3,
  4. #rad4:checked ~ .tab4,
  5. #rad5:checked ~ .tab5,
  6. #rad6:checked ~ .tab6,
  7. #rad7:checked ~ .tab7,
  8. #rad8:checked ~ .tab8,
  9. #rad9:checked ~ .tab9,
  10. #rad10:checked ~ .tab10...
así hasta infinitos tabs...

Gracias de nuevo por la ayuda.

Última edición por edgar4615; 13/09/2013 a las 10:29

Etiquetas: css, grupo, input, página, pestañas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:01.