Estoy confeccionando un menú de pestañas y hasta ahora con lo que he investigado por ahí más lo que yo se (poco) me voy defendiendo. Ya lo tengo prácticamente terminado, pero me falla un detalle que no se como resolver (será la hora
).Cuando pincho una pestaña cualquiera me selecciona el contenido que corresponde, sin embargo, no se mantiene "pulsada" mientras dura la selección.
Mi idea sería que al pinchar la opción desapareciera el background-color y cogiera el mismo que el contenido además de que desapareciera la línea inferior del botón, pero manteniendo el resto del borde, creando el efecto de que la pestaña pertenece a una ficha.
Aquí el código para vuestro examen (se admiten críticas constructivas acompañadas de alternativas funcionales
).El menú
Código HTML:
<div id="Pestanas"> <ul> <li style="margin-left: 1px"><a href="#" rel="1" class="button"><span>Perfil</span></a></li> <li><a href="#" rel="2" class="button"><span>Referencias</span></a></li> <li><a href="#" rel="3" class="button"><span>Documentos</span></a></li> </ul> </div> <div id="Pestanasline"> </div>
El estilo del menú:
Código HTML:
/*Menus de pestaña*/
#Pestanas{margin-left: 4px;padding: 0px;width: 100%;background: transparent;voice-family: "\"}\"";voice-family: inherit;padding-left: 5px;}
#Pestanas ul{font: bold 11px Arial, Verdana, sans-serif;margin:0;padding:0;list-style:none;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
#Pestanas li{display:inline;margin:0 2px 0 0;padding:0;text-transform:uppercase;line-height: 1.5em;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
#Pestanas a{float:left;color: white;background-color: FireBrick;margin:0 2px 0 0;padding:0 0 0 3px;text-decoration:none;letter-spacing: 1px;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
#Pestanas a span{float:left;display:block;background-color: FireBrick;padding:3px 9px 3px 6px;border-radius:4px 4px 0px 0px;-moz-border-radius: 4px 4px 0px 0px;-webkit-border-radius:4px 4px 0px 0px;}
#Pestanas a span{float:none;}
#Pestanas a:hover{background-color: #d50509;}
#Pestanas a:hover span{background-color: #d50509;}
#Pestanas #current a #Pestanas #current span{ /*boton selecionado*/background-color:#f0f8ff;}
#Pestanasline{clear: both;padding: 0;width: 100%;height: 1px;line-height: 1px;background: #8b0000;}
Gracias por adelantado
, 
. Por ejemplo cuando estoy en la pestaña 1 el contenido dcorrespondiente a esa pestaña aparece debajo, sin embargo la pestaña no mantiene el color del background ni cambia el color de los bordes, de manera que no parece que sea una ficha. Seguramente no uso bien la seudo clase active o la pestaña no se mantiene activa cuando se pincha.
.
:
.
.
el problema que tiene eso par mi caso es que la lsita hace referencia a un AJAX que, al fina lde todo trae la información de los menús dentro de un DIV de la página sin regargar TODA la página.
