Grupo de pestañas en la misma página

edgar4615 · #1 (**permalink**) 11/09/2013, 08:53

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<div class="tabGroup">
    <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked"/>
    <label for="rad1">Tab 1</label>
 
    <input type="radio" name="tabGroup1" id="rad2" class="tab2"/>
    <label for="rad2">Tab 2</label>
     
    <input type="radio" name="tabGroup1" id="rad3" class="tab3"/>
    <label for="rad3">Tab 3</label>
     
    <br/>
 
    <div class="tab1">Tab 1 content</div>
    <div class="tab2">Tab 2 content</div>
    <div class="tab3">Tab 3 content</div>
</div>

Código CSS:

Ver original/* This matchs tabs displaying to thier associated radio inputs */
.tab1:checked ~ .tab1, .tab2:checked ~ .tab2, .tab3:checked ~ .tab3 {
    display: block;
}

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<div class="tabGroup">
    <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked"/>
    <label for="rad1">Tab 1</label>
 
    <input type="radio" name="tabGroup1" id="rad2" class="tab2"/>
    <label for="rad2">Tab 2</label>
     
    <input type="radio" name="tabGroup1" id="rad3" class="tab3"/>
    <label for="rad3">Tab 3</label>
     
    <br/>
 
    <div class="tab1">Tab 1 content</div>
    <div class="tab2">Tab 2 content</div>
    <div class="tab3">Tab 3 content</div>
</div>
<div class="tabGroup2">
    <input type="radio" name="tabGroup2" id="rad1" class="tab1" checked="checked"/>
    <label for="rad1">Tab 1</label>
 
    <input type="radio" name="tabGroup2" id="rad2" class="tab2"/>
    <label for="rad2">Tab 2</label>
     
    <input type="radio" name="tabGroup2" id="rad3" class="tab3"/>
    <label for="rad3">Tab 3</label>
     
    <br/>
 
    <div class="tab1">Tab 1 content</div>
    <div class="tab2">Tab 2 content</div>
    <div class="tab3">Tab 3 content</div>
</div>
<div class="tabGroup3">
    <input type="radio" name="tabGroup3" id="rad1" class="tab1" checked="checked"/>
    <label for="rad1">Tab 1</label>
 
    <input type="radio" name="tabGroup3" id="rad2" class="tab2"/>
    <label for="rad2">Tab 2</label>
     
    <input type="radio" name="tabGroup3" id="rad3" class="tab3"/>
    <label for="rad3">Tab 3</label>
     
    <br/>
 
    <div class="tab1">Tab 1 content</div>
    <div class="tab2">Tab 2 content</div>
    <div class="tab3">Tab 3 content</div>
</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

faillure · #2 (**permalink**) 11/09/2013, 13:08

1º: cambiando el html

Código HTML:

Ver original<label for="rad3">Tab 3</label>
    <input type="radio" name="tabGroup1" id="rad3" class="tab3"/>
    <div class="tab">Tab content</div>

2º: una regla tipo

Código CSS:

Ver originalinput:checked + .tab {
 
    }

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

edgar4615 · #3 (**permalink**) 11/09/2013, 14:27

Muchas gracias, en cuanto pueda lo pruebo y comento.

Saludos y gracias por la pronta respuesta.

edgar4615 · #4 (**permalink**) 12/09/2013, 02:53

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="es" xml:lang="es" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>TAB GROUP</title>
</head>
 
<link rel="stylesheet" type="text/css" href="solapas.css" />
 
<body>
 
    <div class="tabGroup" id="tabGroup1">
        <input type="radio" name="tabGroup1" id="rad1" checked="checked" class="tab1"/>
        <label for="rad1">Esto es una prueba</label>
        <div class="tab"><p>primera pestaña 1</p></div>
        
        <input type="radio" name="tabGroup1" id="rad2" class="tab2"/>
        <label for="rad2">Prueba 2</label>
        <div class="tab"><p>primera pestaña 2</p></div>
    
        <input type="radio" name="tabGroup1" id="rad3" class="tab3"/>
        <label for="rad3">PRUEBA 3</label>
        <div class="tab"><p>primera pestaña 3</p></div>
 
        <input type="radio" name="tabGroup1" id="rad4" class="tab4"/>
        <label for="rad4">Prueba 4</label>
        <div class="tab"><p>primera pestaña 4</p></div>
    
    <br/>
    </div>
 
<p>Salto de línea</p>
 
    <div class="tabGroup" id="tabGroup2">
        <input type="radio" name="tabGroup2" id="rad1" checked="checked" class="tab1"/>
        <label for="rad1">2.1</label>
        <div class="tab"><p>segunda pestaña 1</p></div>
        
        <input type="radio" name="tabGroup2" id="rad2" class="tab2"/>
        <label for="rad2">2.2</label>
        <div class="tab"><p>segunda pestaña 2</p></div>
    
        <input type="radio" name="tabGroup2" id="rad3" class="tab3"/>
        <label for="rad3">2.3</label>
        <div class="tab"><p>segunda pestaña 3</p></div>
 
        <input type="radio" name="tabGroup2" id="rad4" class="tab4"/>
        <label for="rad4">2.4</label>
        <div class="tab"><p>segunda pestaña 4</p></div>
    
    <br/>
    </div>
</body>
</html>

Código CSS:

Ver originalinput:checked + .tab{
    display: block;
}

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

faillure · #5 (**permalink**) 13/09/2013, 04:33

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

edgar4615 · #6 (**permalink**) 13/09/2013, 10:23

Buenas de nuevo, gracias por la ayuda.

Código CSS:

Ver original/* Set the size and font of the tab widget */
.tabGroup {
    font-family: 'Verdana',Helvetica,sans-serif;
    font-size: .8em;
    margin: 0 auto;
    background: none repeat scroll 0 0 #F3F1EB;
    border: 1px solid #DEDBD1;
    padding: 10px;
    width: 600px;
    height: auto;
    text-align: justify;
    color: #385c5b;
}
:adios:
.tabGroupTexto {
    font-family: 'Verdana',Helvetica,sans-serif;
    font-size: .8em;
    margin: 0 auto;
    background: none repeat scroll 0 0 #F3F1EB;
    border: 1px solid #DEDBD1;
    padding: 10px;
    width: 600px;
    height: auto;
    text-align: justify;
    color: #385c5b;
}
 
.tabGroup > label {
    cursor: pointer;
}
 
/* Configure the radio buttons to hide off screen */
.tabGroup > input[type="radio"] {
    position: fixed;
    left:-100px;
    top:-100px;
}
 
/* Configure labels to look like tabs */
.tabGroup > input[type="radio"] + label {
    /* inline-block such that the label can be given dimensions */
    display: inline-block;
 
    /* A nice curved border around the tab */
    border: 1px solid #DEDBD1;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
 
    /* the bottom border is handled by the tab content div */
    border-bottom: 0;
 
    /* Padding around tab text */
    padding: 5px 10px;
 
    /* Set the background color to default gray (non-selected tab) */
    background-color:#ddd;
}
 
/* Focused tabs need to be highlighted as such */
.tabGroup > input[type="radio"]:focus + label {
    border:1px dashed #DEDBD1;
}
 
/* Checked tabs must be white with the bottom border removed */
.tabGroup > input[type="radio"]:checked + label {
    background-color:white;
    font-weight: bold;
    border-bottom: 1px solid white;
    margin-bottom: -1px;
}
 
/* The tab content must fill the widgets size and have a nice border */
.tabGroup > div {
    display: none;
    border: 1px solid #DEDBD1;
    background-color: white;
    padding: 10px 20px;
    height: 81%;
    overflow: auto;
    margin-top: -1px;
 
    border-radius: 0 5px 5px 5px;
    -moz-border-radius: 0 5px 5px 5px;
    -webkit-border-radius: 0 5px 5px 5px;
 
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
}
 
.tabGroup > div img {
    float: right;
        padding-left: 15px;
    /*border: 1px solid black;*/
}
 
    /* This matchs tabs displaying to thier associated radio inputs */
    .tab1:checked ~ .tab1, .tab2:checked ~ .tab2, .tab3:checked ~ .tab3 {
        display: block;
    }

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#rad1:checked ~ .tab1,
#rad2:checked ~ .tab2,
#rad3:checked ~ .tab3,
#rad4:checked ~ .tab4,
#rad5:checked ~ .tab5,
#rad6:checked ~ .tab6,
#rad7:checked ~ .tab7,
#rad8:checked ~ .tab8,
#rad9:checked ~ .tab9,
#rad10:checked ~ .tab10...

así hasta infinitos tabs...

Gracias de nuevo por la ayuda.