Cambiar color a un elemento seleccionado de un menu

[kinyiro_360]

ola a todos

tengo una duda

tengo un menu vertical lo arme con listas y le di formato con una hoja de estilos y tiene la funcionalidad de un acordeon pero no se como lograr q al seleccionar un elemento este cambie de color de fondo y se quede asi asta q el usuario de click en otro elemento

espero me puedan ayudar
de antemano muchas gracias

[Gothgauss]

COn jquery es muy sencillo.

Si por ejemplo tienes un div que quieres cambiar de color, por ejemplo a rojo, sólo tienes que poner lo siguiente:

$('#divacambiar').css({
background:'red'
});

Conoces algo de jquery?

[kinyiro_360]

Iniciado por Gothgauss

COn jquery es muy sencillo.

Si por ejemplo tienes un div que quieres cambiar de color, por ejemplo a rojo, sólo tienes que poner lo siguiente:

$('#divacambiar').css({
background:'red'
});

Conoces algo de jquery?

no la verdad nunca e trabajado con jquery
por eso lo ise con css y javascript hay alguna forma de acerlo directamente en la hoja de estilos o con java script

[garciasanchezdani]

Con javascript puedes hacerlo usando el método onclick()
http://www.w3schools.com/jsref/event_onclick.asp
Saludos

[Gothgauss]

Peor hacerlo con jquery, para esto y futuras cosas que quieras hacer te va a resultar mucho más sencillo, ya que necesitas mucho menos código y es más sencillo de entender.

Para usar jquery sólo deberas bajárte el archivo de jquery de www.jquery.com y enlazar el archivo que te has bajado a tu web.

Luego con crear el script como te he dicho es suficiente.

Te recomiendo que le eches un ojo y veas sus infinitas posibilidades de gran aspecto visual con tan poco.

[garciasanchezdani]

Estoy de acuerdo contigo Gothgauss Yo hace poco que empecé a trabajar con jQuery, y la verdad es que es una pasada...lo fácil de aprender, y como bien dices, las posibilidades que ofrece. A mí me encanta.

[kinyiro_360]

bueno lo q pasa q en el evento onclick ya tengo una funcion
puedo meter 2 funciones en este evento

una para desplegar y otra para q me cambie de color el elemento selecionado

[garciasanchezdani]

onClick="funcion1();funcion2();"

[kinyiro_360]

ya lo intente y me iso cosas medio raras algien me podria ayudar con el codigo para javascript
lo q pasa q tengo el tiempo encontra

por decir tengo este estilo

colorFondo
{
background:#DBE8C4;
}

lo podria llamar directamente al evento onclick o como tendria q acer mi codigo en javascript para llamarlo en este evento

[garciasanchezdani]

¿Podrías pasar todo el código?

[kinyiro_360]

esta es mi hoja de estilos

#menu .hide
{
display:none;
}
#menu .show
{
display:list-item;
position:relative;
left:0;
top:0;
}
#menu ul.MenuP
{
margin:0;
padding:0;
list-style:none;
width:287px;
cursor:pointer;
border:1px solid #ccc;
border-radius: 8px 8px 8px 8px;
}
#menu ul li
{
position:relative;
list-style:none;
border-top:1px solid #ccc;
}
#menu ul li ul
{
margin:0;
padding:0;
position:relative;
display:none;
list-style:none;
}
#menu ul li ul li
{
position:relative;
display:list-item;
}
#menu ul li a
{
display:block;
text-decoration:none;
padding:5px;
}

este es el codigo javascript

var idp;
var viewM = null;
function showMenuP(idp)
{
var obj = document.getElementById(idp);
obj.className = (obj == viewM)? 'hide':'show';
if(viewM != null)
{
viewM.className = 'hide';
}
viewM = (obj == viewM) ? null:obj;
}
var id;
var viewSub = null;
function showMenu(id)
{
var obj = document.getElementById(id);
obj.className = (obj == viewSub)? 'hide':'show';
if(viewSub != null)
{
viewSub.className = 'hide';
}
viewSub = (obj == viewSub) ? null:obj;
}
var idd;
var viewSubS = null;
function showSub(idd)
{
var obj = document.getElementById(idd);
obj.className = (obj == viewSubS)? 'hide':'show';
if(viewSubS != null)
{
viewSubS.className = 'hide';
}
viewSubS = (obj == viewSubS) ? null:obj;
}
y el menu esta un poco grande asi q lo resumire

opcion1
opcion1.1
opcion1.2
opcion1.2.1
opcion1.2.1.1
opcion1.2.1.2
opcion1.2.2
opcion1.3
opcion1.3.1
opcion1.4
opcion2
opcion2.1
opcion2.2
opcion2.2.1
opcion3

para llamar a las funciones lo ago asi

onclick="showMenuP('MenuP1');return false;"