cambiar color al seleccionar pestaña

[huam]

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

[mayid]

Yo no se hacerlo en CSS. Me parece que para usar pestañas tenés que recurrir a javascript.

[kseso?]

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.

Iniciado por mayid

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

[mayid]

:o)

Si el CC3 está ahí, será cuestión de aprender a usarlo.

[pann84]

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

[mayid]

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).

[pann84]

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

[kseso?]

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:

<div class="navi">
    <ul class="mainNavi">
        <li><a href="#uno">Uno</a></li>
        <li><a href="#dos">Dos</a></li>
        <li><a href="#tres">Tres</a></li>
        <li><a href="#cuatrol">Cuatro</a></li>
        <li><a href="#cinco">Cinco</a></li>
    </ul>
</div>
...
<div id="uno>
<!-- contenido -->
</div>
...
<div id="dos>
<!-- contenido -->
</div>
...
 

o que en vez de remitir a un /div/ exterior, cada /li/ tuviese otras listas anidadas dentro de él:

Código HTML:

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

[mayid]

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!