Foros del Web » Creando para Internet » CSS »

Pestaña Activa en Css

Estas en el tema de Pestaña Activa en Css en el foro de CSS en Foros del Web. Hola, Estoy haciendo una página asp con pestañas. Para manejar las pestañas estoy usando un archivo Css con la siguiente codificación: #header { width: 100%; ...
  #1 (permalink)  
Antiguo 14/04/2011, 05:35
Avatar de abmptc  
Fecha de Ingreso: septiembre-2009
Mensajes: 43
Antigüedad: 15 años, 2 meses
Puntos: 0
Pestaña Activa en Css

Hola,

Estoy haciendo una página asp con pestañas. Para manejar las pestañas estoy usando un archivo Css con la siguiente codificación:

#header
{
width: 100%;
height: 100px;
margin: 0 auto;
padding: 2px 0 0 0;
background: #FFFFFF url(../images/img01_peque.gif) repeat-x;
}

#menu
{
float: left;
padding: 0 0 0 0;
width: 603px;
height: 30px;
}

#menu ul
{
height: 30px;
margin: 0;
padding: 2px 0;
list-style: none;
width: 800px;
}

#menu li
{
display: inline;
}

#menu a
{
display: block;
float: left;
width: 120px;
height: 60px;
padding-top: 12px;
background: url(../images/img03.jpg) no-repeat;
text-align: center;
text-decoration: none;
letter-spacing: -1px;
font-size: 18px;
/* text-transform: lowercase; */
}

#menu a:hover, #menu .active a
{
background-image: url(../images/img04.jpg);
color: #FFFFFF;
}

#menu #current a
{
background-image: blue;
color: red;
}

Con esto código consigo que cuando pasamos el ratón por encima de una pestañas, esta cambie de color. ¿Hay alguna forma de configurar las pestañas con css para que cuando hagamos click con el ratón en una pestaña se quede con un color distinto, para así saber en que pestaña estamos en cada momento?

Muchas gracias de antemano y un saludo.
  #2 (permalink)  
Antiguo 14/04/2011, 05:47
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 5 meses
Puntos: 1012
Respuesta: Pestaña Activa en Css

no, has de usar html dom
  #3 (permalink)  
Antiguo 14/04/2011, 06:10
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 13 años, 7 meses
Puntos: 37
Respuesta: Pestaña Activa en Css

Hola.

También podrías crear un selector de clase css llamado, por ejemplo, "selected" y atribuírselo a la pestaña seleccionada. Por ejemplo:

Código CSS:
Ver original
  1. #menu a.selected
  2. {
  3.   color: white;
  4.   background: black;
  5. }
Código HTML:
Ver original
  1. <li><a href="#">menu1</a></li>
  2. <li><a class="selected" href="#">menu2</a></li>
  3.  
  4. <!-- Eso sí, en cada página, la sección tiene que tener su class="selected", así que esto puede ser un poco complicado de implementar -->


Un saludo.
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.
  #4 (permalink)  
Antiguo 14/04/2011, 08:26
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 5 meses
Puntos: 1012
Respuesta: Pestaña Activa en Css

Cita:
Iniciado por KoswiDigital Ver Mensaje
Hola.

También podrías crear un selector de clase css llamado, por ejemplo, "selected" y atribuírselo a la pestaña seleccionada. Por ejemplo:
no funcionará a no ser que use la propiedad HTMLElement className() de html dom

un ejemplo
  #5 (permalink)  
Antiguo 14/04/2011, 09:26
Avatar de KoswiDigital  
Fecha de Ingreso: abril-2011
Ubicación: Galicia - España
Mensajes: 220
Antigüedad: 13 años, 7 meses
Puntos: 37
Respuesta: Pestaña Activa en Css

Ah, me pasa por no leer correctamente, hablamos de la misma página, no de páginas diferentes. ¡Mis disculpas! Efectivamente, hay que utilizar JavaScript :)
__________________
http://www.koswidigital.com - Diseño web, Programación web, Fotografía profesional, Retoque digital.

Etiquetas: pestaña
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 04:35.