Pestañas solo CSS usando entrada: marcado

Encontré este ejemplo (la versión "marcada") y funciona:

http://jsfiddle.net/2cTwA/

Pero quiero envolver la entrada y las etiquetas dentro de un elemento contenedor (como nav), y si hago eso las pestañas dejan de funcionar :(

¿Hay alguna solución para esto?

solución encontrada: http://jsfiddle.net/2cTwA/7/

preguntado el 26 de septiembre de 12 a las 16:09

¡¡Encontré una solución!! Puedo envolver las etiquetas dentro de un elmenet y simplemente dejar las entradas dentro del mismo padre que las pestañas. Están ocultos de todos modos, así que no me importa: D -

3 Respuestas

Con una ligera modificación de HTML y CSS - DEMO

CO

input { display: none; }

nav { overflow: hidden }
label   { float: left; display: inline-block; padding: 5px 10px; }
label a { color: #d33; text-decoration: underline; cursor: pointer; }   

.tab { display: none; border: 1px solid #333; padding: 10px; }
a[name="tab1"] + .tab { display: block }
:target + .tab { display: block }
:target ~ a[name="tab1"] + .tab { display: none  }

HTML

<section class="tab-area tabs-checked">

    <nav>
        <input checked type="radio" name="tab" id="tab-A" />
        <input type="radio" name="tab" id="tab-B" />
        <input type="radio" name="tab" id="tab-C" />

        <label class="tab-link" for="tab-A"><a href="#tab1">Tab 1</a></label>
        <label class="tab-link" for="tab-B"><a href="#tab2">Tab 2</a></label>
        <label class="tab-link" for="tab-C"><a href="#tab3">Tab 3</a></label>
    </nav>

    <a name="tab3"></a>
    <article class="tab">
        <h3>Tab 3</h3>          
    </article>

    <a name="tab2"></a>
    <article class="tab">
        <h3>Tab 2</h3>
    </article>    

    <a name="tab1"></a>
    <article class="tab">
        <h3>Tab 1.</h3>
    </article>

</section>

Respondido el 26 de Septiembre de 12 a las 17:09

hmm no hay una pestaña activa por defecto - Alex

@Alex ahora tiene una pestaña activa ... solo una pequeña advertencia: para usar el ~ selector de hermanos correctamente, debe revertir el orden de las pestañas de sus artículos: Zoltán Toth

Está usando el selector de hermanos (~), y al usar un elemento contenedor como nav, está eliminando las entradas y las etiquetas para que no sean hermanos de los artículos.

Simplemente necesita volver a escribir su css donde usa la tilde.

Respondido el 26 de Septiembre de 12 a las 16:09

aquí está el ejemplo de sass para 12 (máximo) pestañas usando solo CSS

.tabs {

  input[type=radio] {
    display: none;

    @for $i from 1 through 12 {

      &:nth-of-type(#{$i}):checked ~ .content .tab:nth-child(#{$i}) {
        display: block;
      }
    }
  }

  label {
    cursor: pointer;
    display: inline-block;
  }

  .tab {
    display: none;
  }
}

y aquí está el marcado html

  <div class="tabs">
    <input name="controls" type="radio" id="controls-tab" checked="true"/>
    <label for="controls-tab">controls</label>
    <input name="controls" type="radio" id="panels-tab"/>
    <label for="panels-tab">panels</label>
    <input name="controls" type="radio" id="readme-tab"/>
    <label for="readme-tab">readme</label>
    <div class="content">
      <div class="tab">
      </div>
      <div class="tab">
      </div>
      <div class="tab">
      </div>
    </div>
  </div>

no es necesario posicionar relativamente las divisiones de pestañas dentro de la división de contenido. no es necesario establecer la altura del contenido.

contestado el 22 de mayo de 14 a las 22:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.