Tema: Grupo de pestañas en la misma página
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 12/09/2013, 02:53
edgar4615
 
Fecha de Ingreso: agosto-2010
Mensajes: 202
Antigüedad: 14 años, 3 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. <head>
  4.     <title>TAB GROUP</title>
  5. </head>
  6.  
  7. <link rel="stylesheet" type="text/css" href="solapas.css" />
  8.  
  9. <body>
  10.  
  11.     <div class="tabGroup" id="tabGroup1">
  12.         <input type="radio" name="tabGroup1" id="rad1" checked="checked" class="tab1"/>
  13.         <label for="rad1">Esto es una prueba</label>
  14.         <div class="tab"><p>primera pestaña 1</p></div>
  15.         
  16.         <input type="radio" name="tabGroup1" id="rad2" class="tab2"/>
  17.         <label for="rad2">Prueba 2</label>
  18.         <div class="tab"><p>primera pestaña 2</p></div>
  19.     
  20.         <input type="radio" name="tabGroup1" id="rad3" class="tab3"/>
  21.         <label for="rad3">PRUEBA 3</label>
  22.         <div class="tab"><p>primera pestaña 3</p></div>
  23.  
  24.         <input type="radio" name="tabGroup1" id="rad4" class="tab4"/>
  25.         <label for="rad4">Prueba 4</label>
  26.         <div class="tab"><p>primera pestaña 4</p></div>
  27.     
  28.     <br/>
  29.     </div>
  30.  
  31. <p>Salto de línea</p>
  32.  
  33.     <div class="tabGroup" id="tabGroup2">
  34.         <input type="radio" name="tabGroup2" id="rad1" checked="checked" class="tab1"/>
  35.         <label for="rad1">2.1</label>
  36.         <div class="tab"><p>segunda pestaña 1</p></div>
  37.         
  38.         <input type="radio" name="tabGroup2" id="rad2" class="tab2"/>
  39.         <label for="rad2">2.2</label>
  40.         <div class="tab"><p>segunda pestaña 2</p></div>
  41.     
  42.         <input type="radio" name="tabGroup2" id="rad3" class="tab3"/>
  43.         <label for="rad3">2.3</label>
  44.         <div class="tab"><p>segunda pestaña 3</p></div>
  45.  
  46.         <input type="radio" name="tabGroup2" id="rad4" class="tab4"/>
  47.         <label for="rad4">2.4</label>
  48.         <div class="tab"><p>segunda pestaña 4</p></div>
  49.     
  50.     <br/>
  51.     </div>
  52. </body>
  53. </html>

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

seguiré intentándolo. Gracias de antemano por vuestra colaboración.