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!!!