Foros del Web » Creando para Internet » CSS »

cambiar color al seleccionar pestaña

Estas en el tema de cambiar color al seleccionar pestaña en el foro de CSS en Foros del Web. hola, cómo puedo hacer para que una vez que pulse un boton en un menú de pestañas (creadas con una lista) se me cambie el ...
  #1 (permalink)  
Antiguo 01/09/2010, 06:39
 
Fecha de Ingreso: enero-2009
Ubicación: España
Mensajes: 86
Antigüedad: 8 años, 10 meses
Puntos: 2
cambiar color al seleccionar pestaña

hola,
cómo puedo hacer para que una vez que pulse un boton en un menú de pestañas (creadas con una lista) se me cambie el color de éste?
Vamos, hasta el a:hover todo va bien, pongo el cursor encima y se me cambia de color pero si pulso en el botón, en lugar de conservar el color nuevo (el del hover) vuelve al color inicial.
Algo debo estar haceindo mal porque me he mirado algun que otro tutorial y no me sale ni para atrás
sl2
  #2 (permalink)  
Antiguo 01/09/2010, 08:54
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: cambiar color al seleccionar pestaña

Yo no se hacerlo en CSS. Me parece que para usar pestañas tenés que recurrir a javascript.
  #3 (permalink)  
Antiguo 01/09/2010, 10:05
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: cambiar color al seleccionar pestaña

Si la consulta es en el foro de css, dejamos de lado otros métodos basados en otros "lenguajes"
Con css 2.1 puede definir los distintos "estados" de un enlace:
a {}
a:visited {}
a:hover {}
a:active {}
/a:focus {}/
Con un pequeño inconveniente. Que los estados no son persistentes.

Cita:
Iniciado por mayid Ver Mensaje
Yo no se hacerlo en CSS. Me parece que para usar pestañas tenés que recurrir a javascript.
Pues vamos allá Mayid, que nunca es tarde ;)
Hay que recurrir a CSS 3 y sus pseudo-clases.
Para lograr un estado persistente (dicho con algunas reservas) sólo hay que recurrir al uso de :target
  #4 (permalink)  
Antiguo 01/09/2010, 13:52
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: cambiar color al seleccionar pestaña

:o)

Si el CC3 está ahí, será cuestión de aprender a usarlo.
  #5 (permalink)  
Antiguo 02/09/2010, 02:18
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Respuesta: cambiar color al seleccionar pestaña

Yo para hacerlo con CSS 2.1 lo que hacía era darle una clase a la pestaña vigente y modificarle el estilo, pero claro eso siempre y cuando el contenido no sea dinámico, no se si me explico, pero ahora mismo con CSS3 es mucho más sencillo
  #6 (permalink)  
Antiguo 02/09/2010, 09:35
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: cambiar color al seleccionar pestaña

Que pasa con los navegadores que no interpretan CSS3? Yo aún no lo tengo incorporado por temas de compatibilidad. Y ante un problema como el que se plantea acá, yo buscaría una solución entre CSS y php (un mecanísmo dinámico).
  #7 (permalink)  
Antiguo 03/09/2010, 03:56
Avatar de pann84  
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 7 años, 4 meses
Puntos: 4
Respuesta: cambiar color al seleccionar pestaña

Yo insisto, en que se puede hacer con CSS2 sin necesidad de meterte en programación, de todos modos si tienes dudas de las compatibilidades de CSS3 te dejo una pequeña guía de compatibilidad entre navegadores con CSS3, lo que cada uno admite y a partir de ahí ya es cosa tuya lo que uses:

http://www.findmebyip.com/litmus/#target-selector

Yo lo que hago es simplemente darle una clase a la pestaña en vigencia y cambiarle el estilo en la página donde ha de cambiarse, con CSS2, que así te aseguras las compatibilidades, por ejemplo:

Código:
CSS
.activo {
    font-size: 1.5em;
    background: #ccc;
}

HTML
<div class="navi">
    <ul class="mainNavi">
        <li><a href="uno.html">Uno</a></li>
        <li><a href="dos.html">Dos</a></li>
        <li><a href="tres.html">Tres</a></li>
        <li class="activo"><a href="cuatro.html">Cuatro</a></li>
        <li><a href="cinco.html">Cinco</a></li>
    </ul>
</div>
A penas he dado estilo, es simplemente para que entiendas a lo que me refiero. Espero que te sirva

Última edición por pann84; 03/09/2010 a las 04:07
  #8 (permalink)  
Antiguo 03/09/2010, 06:54
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: cambiar color al seleccionar pestaña

Pann84:
El ejemplo que pone no es el planteado inicialmente, según he entendido yo.
Huan selecciona un elemento y permaneciendo en el mismo html quiere que el elemento seleccionado mantenga unas propiedades. Propiedades que desea sean persistentes.
En su ejemplo, hay un cambio de página, o para que funcione en el mismo documento html debería proveer (mediante otro lenguaje distinto a css) cómo aplicar su "activo" al seleccionado.

¿Qué ocurriría si el html fuese el siguiente?
Código HTML:
Ver original
  1. <div class="navi">
  2.     <ul class="mainNavi">
  3.         <li><a href="#uno">Uno</a></li>
  4.         <li><a href="#dos">Dos</a></li>
  5.         <li><a href="#tres">Tres</a></li>
  6.         <li><a href="#cuatrol">Cuatro</a></li>
  7.         <li><a href="#cinco">Cinco</a></li>
  8.     </ul>
  9. </div>
  10. ...
  11. <div id="uno>
  12. <!-- contenido -->
  13. </div>
  14. ...
  15. <div id="dos>
  16. <!-- contenido -->
  17. </div>
  18. ...
o que en vez de remitir a un /div/ exterior, cada /li/ tuviese otras listas anidadas dentro de él:
Código HTML:
Ver original
  1. <ul><li><a.../><ul><li>....</li></ul></li></ul>

Por mi comprensión (que quizás sea errónea) de la duda planteada sugería antes los distintos "estados" de enlace y el uso de /:actve/ /:focus/ además de /:hover/

Pero como viene siendo muy habitual últimamente, no mostró los códigos implicados (html+css). Así que todo son cábalas.


Sobre el usar ciertas propiedades css 3 o no usarlas, Mayid y compañía, es una decisión de quien pica el código, en función de las particularidades del proyecto y la finalidad a la que van destinadas.
  #9 (permalink)  
Antiguo 03/09/2010, 10:13
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: cambiar color al seleccionar pestaña

Pann84: si, yo también uso esa solución. Y no me inclino a que se pueda encarar un proyecto de tabs sin salir de la pagina o usar javascript/ajax.

Gracias por la tabla de compatibilidades!

Etiquetas: color, pestaña, seleccionar
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 11:10.