Foros del Web » Creando para Internet » CSS »

seleccionar pestaña hecha con lista y links

Estas en el tema de seleccionar pestaña hecha con lista y links en el foro de CSS en Foros del Web. Hola!! estoy desesperada con css!! He creado unas pestañas, utilizando una lista y enlaces. Ahora lo que necesito es que cuando selecciono una pestaña se ...
  #1 (permalink)  
Antiguo 11/12/2012, 05:44
Avatar de mj1984  
Fecha de Ingreso: septiembre-2008
Mensajes: 129
Antigüedad: 15 años, 7 meses
Puntos: 0
Pregunta seleccionar pestaña hecha con lista y links

Hola!! estoy desesperada con css!! He creado unas pestañas, utilizando una lista y enlaces. Ahora lo que necesito es que cuando selecciono una pestaña se quede 'marcada' de alguna forma (con el fondo de otro color), hasta que seleccione otra pestaña. No lo consigo!!

El codigo que tengo es este:

Código:
<ul class="tablist">
	<li><a id="t1" href="#" >Tab1</a></li>
	<li><a id="t2" href="#">Tab2</a></li>
	<li><a id="t3" href="#">Tab2</a></li>
</ul>


Y este es el css que tengo:

.tablist {
    list-style:none; 
    height:2em;
    padding:0; 
    margin:10px 0px 0px 0px; 
    border: none;
}

.tablist li {
    float:left; 
    margin-right:0.13em; 
}

.tablist li a {
    display:block;
    padding:0 1em;
    text-decoration:none;
    border:0.06em solid #000;
    border-bottom:0;
    font:bold 0.88em/2em arial,geneva,helvetica,sans-serif;
    color:#000;
    background-color:#ccc;

    /* CSS 3 elements */
    -webkit-border-top-right-radius:0.50em;
    -webkit-border-top-left-radius:0.50em;
    -moz-border-radius-topright:0.50em;
    -moz-border-radius-topleft:0.50em;
    border-top-right-radius:0.50em;
    border-top-left-radius:0.50em;
}

.tablist li a:hover {
    background:#ffdd00; 
    color:#000;
    text-decoration:none;
}
Muchas gracias!!!
  #2 (permalink)  
Antiguo 11/12/2012, 15:45
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: seleccionar pestaña hecha con lista y links

si lo que quieres es usar css, tendrás que usar la pseudo-clase :target. ve su compatibilidad
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Etiquetas: hover, links, lista, pestaña, fondo
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 20:45.