Opcion SELECTED en un LI o A

[JuJoGuAl]

Pues veran estoy haciendo unas pestañas con un query que e bajado y aplicando CSS busco que tengan una opcion SELECTED es decir cuando estoy en DICHA pestana me tenga un diseno diferente al uso normal...

ahora bien asi tengo las pestanas:

Código HTML:

<ul class="tabs idTabsShort">
                    <li><a href="#tab1">M&aacute;s</a></li>
                    <li><a href="#tab2">Ficha t&eacute;cnica</a></li>
                    <li><a href="#tab3">3ra Ficha</a></li>
                </ul>
 

y el CSS seria:

Código CSS:

/* Tabs */
.tabs {
    list-style-type: none;
    border-bottom: solid 1px #76839b;
    height: 21px;
    margin-top: 1em
}
ul.tabs li {
    float: left;
    margin-right: 1px
}
.tabs a {
    background-image: url('tab_bg.jpg');
    display: block;
    width: 173px;
    height: 18px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    padding-top: 3px;
    color: #374853
}
.tabs a:active {
    background-image: url('tab_bg_selected.jpg');
    color: white
}
 
/* IdTabs Short*/
.idTabsShort a {
    background-image: url('tab_bg_short.jpg');
    width: 138px
}
.idTabsShort a:active {
    background-image: url('tab_bg_selected_short.jpg');
    color: white
}
div.sheets {
    clear: both;
    padding: 1em
}
 

probe con a.selected y con li.selected pero no me lo reconoce, lo puse a.active para saber si yo estaba haciendo algo mal pero quiero q la imagen que esta en a.active sea el selecte osea el tab seleccionado, hay alguna forma de hacerlo?

Gracias

[snowmanchip]

Hola de nuevo..jeje..dime que jquery usas..ando medio perdido con tu código..saludos

[JuJoGuAl]

Este:http://craftyman.net/tabs-css-simples-con-jquery/

si conoces uno mejor me lo pichas soy muy nuevo ene sto de plugins es la primera web que uso que le anado los plugins

[snowmanchip]

qué es esto??? dos clases??

Código HTML:

class="tabs idTabsShort">

[JuJoGuAl]

bueno la web q estoy usando la tome de una que me pasaron y si efectivamente puedo aplicar 2 clases pues hay unas donde tengo CLASS="rte justify"

y en la hoja de estilo tengo una clase rte y otra clase justify... en el caso de esas tabs una clase es para tabs pequenas y otra para tabs grandes....

y las 2 funcionan....

Nose porque xD

YA LO CAMBIE Y DEJE UNA SOLA CLASEE LA DE TABS (que posee la imagen mas grande...)

[snowmanchip]

no entendí si te funcionó de todos modos prueba con esta clase:

ul.tabs li. a:active{
background-image: url('tab_bg_selected.jpg');
}

Lo de la consulta anterior era una duda, no era para que eliminaras una clase...
Saludos

[JuJoGuAl]

nop nada no hace nada =(

[snowmanchip]

esto es lo único que no te funciona o hay algo más?

[JuJoGuAl]

eso pues los tabs funcionan perfecto solo quiero q se ponga un fondo cuando se esta en tab actual por eso supuse que la propiedad es SELECTED

[snowmanchip]

..más tarde bajaré ese jquery para intentar hacerlo y te comento..mientras tanto usas dreamweaver?

[JuJoGuAl]

si para editar el html sip, ahora tengo otro problema con la galeria -.- como odio cuando esto me pasa...

[snowmanchip]

no me había dado cuenta que estaba controlada por javascript la clase .active..ya encontré la solución:

quita esta linea de la clase:

Código HTML:

html ul.tabs li.active

esa linea está en una clase larga del css...luego agrégala así:

Código HTML:

html ul.tabs li.active {
background-image: url('tab_bg_selected.jpg');
}

También quita esta línea:

Código HTML:

.tabs a:active {
    background-image: url('tab_bg_selected.jpg');
    color: white;
}

[snowmanchip]

Iniciado por JuJoGuAl

si para editar el html sip, ahora tengo otro problema con la galeria -.- como odio cuando esto me pasa...

si usas dreamweaver ahórrate dolores de cabeza y usa los paneles de spry ,

probé la solución que te envié antes y funciona a la perfección,
Saludos

[JuJoGuAl]

Iniciado por snowmanchip

si usas dreamweaver ahórrate dolores de cabeza y usa los paneles de spry ,

probé la solución que te envié antes y funciona a la perfección,
Saludos

ya pruebo lo que me dijiste y donde consigo dicho panel?

[snowmanchip]

prueba la solución, me cuentas y te digo lo del spry,
saludos

[JuJoGuAl]

Si a la clase te referias al CSS no hace nada lo que me has dicho... no hace nada :S osea no cambian las tabs.

[snowmanchip]

tienes un problema con el código que relaciona al jquery o te falta una línea en el css..pega todo tu css..completo y también el html desde el doctype en adelante..yo lo probé incluso le cambié distintos parámetros y funciona perfecto...., respecto a lo del spry , está disponible creo desde la versión cs3 en adelante...
lo puedes ver en Insertar -> Spry -> panels de ficha spry..

pero esta solución es mejor porque jquery funciona en todos los navegadores aún con js deshabilitado..

[JuJoGuAl]

ah yo tengo es el macromedia dreamweaver 8 no uso las versiones de adobe y ya funciona la linea, solo hacia falta agregar la etiqueda A

tu idea era asi:

Código CSS:

html ul.tabs li.active
{
    background-image: url('tab_bg_selected.jpg');
}
 

y lo puse asi:

Código CSS:

html ul.tabs li.active a
{
    background-image: url('tab_bg_selected.jpg');
}