Problema con estilos en tabs creados con jquery

[salvador86]

Hola estoy elavorando una página pero me trabe en la creación de unos tab este es el link http://www.peru-expeditions.com/web/i-programa.html
Mas o menos en centro de la página encima he colocado los tab con un ejemplo que encontre en internet todo esta ok, pero si se pueden dar cuenta tiene una limitación: que cuando el tab este activo el color de letra sea blanco y cuando no morado, solo se pone blanco cuando esta el cursor encima.

Le he dado vueltas al asunto pero no logro hacerlo le pongo aqui mi css para que me puedan dar una mano. Muchas gracias.

Código PHP:

  ul.tabs li a {
    padding-bottom: 0px;
    outline-style: none;
    outline-color: invert;
    padding-left: 20px;
    outline-width: medium;
    padding-right: 20px;
    display: block;
    font-size: 12px;
    text-decoration: none;
    padding-top: 0px;
}
ul.tabs li a:hover { text-decoration: underline; }
ul.tabs li a:active { color:#FFFFFF; } /*Se supone que ya deberia estar en blanco*/
html ul.tabs li.active { background: url(../estructura/bt-02.gif); color:#FFFFFF }
html ul.tabs li.active a:hover { background: url(../estructura/bt-02.gif); color:#FFFFFF } 
   

[willyfc]

Si lo estas haciendo con Jquery lo más seguro es que el código que nececistas cambiar esta en el código que hace funcionar los tabs, o sea, que esta asignando el css con javascript(js), o en su defecto podrías darle el estilo en ese mismo archivo.

[salvador86]

Hola gracias por tu respuesta bueno este css venia en el tutorial, me supongo que aqui es donde lo debo cambiar pero no veo la manera he intentado muchas cosas, pero no toma el estilo css de activo que le di, como podria hacerlo de aqui rome mi modelo de mi pagina y aqui si pudieron http://www.gapadventures.com/trips/b...ica/CRBC/2010/ gracias

[mayid]

ul.tabs li a:active { color:#FFFFFF; } /*Se supone que ya deberia estar en blanco*/

Cual es la idea con eso? El a:active casi no vas a poder visualizarlo porque ocurre al hacerle click a un enlace. Va muy rápido.

Quizás estes confundiendo :active con .active? Ya solucionaste el problema? Publicarías tu html?

[kseso?]

La diferencia que observo en el html generado es que mientras usted aplica (mediante el js) la clase /active/ a /li/ seleccionado, en el referente que indica, están aplicando la clase al /a/:

<li>
<a href="#fragment-3" class="current">
<span>Dates &amp; Pricing</span>
</a>
</li>

<li class="active">
<a href="#tab2">Dates &amp; Spaces</a>
</li>

Entiendo que el /"current"/ de uno es el /"active"/ del otro.
Si no quiere investigar en el js, bastaría con añadir una nueva declaración en su css:

Código CSS:

html ul.tabs li.active a {
color:#fff;
}
 

el selector lo construyo manteniendo su sintáxis.

Atentamente