Cambio de ID's en Javascript

[Avel42]

Hola, buenas tardes /días.

Ante todo, me presento ya que soy nuevo en estos foros, y me he quedado bastante impresionado con la cantidad de gente que hay por aquí. Soy bastante (por no decir absolutamente) novato referente a la programación en Javascript, así que como comprenderéis mis preguntas son bastante sencillas para la mayoría de vosotros.

Entonces, me gustaría saber si me podríais ayudar con este problema que tengo:

- Tengo un menu en mi página en el que cuando hago clic en un enlace de este menu, el fondo se pone de color blanco debido a que el contenido se carga en AJAX. Necesito hacer que cuando le de a otro enlace, este se ponga de color blanco y cambie el color del anterior enlace en el que hice clic. Como realmente no es cambiar de color, sino de ID (debido a que ya he especificado en CSS las propiedades de la ID, 'seleccionado' si lo quiero de color blanco y vacio si lo quiero negro) me gustaría saber cómo podría hacer esta función.

Lo que tengo ahora mismo es lo siguiente:

Código HTML:

<div class="botonestab" id="seleccionado" ><span style="margin-left:24px;">PRINCIPAL</span></div>
<div class="botonestab"  ><span style="margin-left:24px;">OTRO</span></div>
<div class="botonestab"  ><span style="margin-left:24px;">OTRO 2</span></div> 

Muchas gracias.

[lair]

Hola y bienvenido al foro.

cuando yo necesito hacer algo como eso, no reescribo el ID sino que reescribo TODO el contenido del div (todos los elementos del menu) y a estoy le coloco las nuevas propiedades, te paso el siguiente codigo para que te des una idea mejor.

Código:

function selectedMenu(Sender){
            if(Sender=="inicio"){
                document.getElementById('nav').innerHTML="<ul><li class=\"active\"><a href=\"javascript:pedirDatos('modulos/inicio.php','topstory-txt','inicio')\">Inicio</a></li><li><a href=\"javascript:pedirDatos('modulos/ubicacion.php','topstory-txt','ubicacion')\">Ubicación</a></li><li><a href=\"javascript:pedirDatos('modulos/clientes.php','topstory-txt','mclientes')\">Clientes</a></li><li><a href=\"javascript:pedirDatos('modulos/servicios.php','topstory-txt','servicios')\">Servicios</a></li><li><a href=\"javascript:pedirDatos('modulos/contactar.php','topstory-txt','contactar')\">Contactar</a></li><li><a href=\"javascript:pedirDatos('modulos/hosting.php','topstory-txt','hosting')\">Hosting</a></li></ul>";
            }
            if(Sender=="ubicacion"){
                document.getElementById('nav').innerHTML="<ul><li><a href=\"javascript:pedirDatos('modulos/inicio.php','topstory-txt','inicio')\">Inicio</a></li><li class=\"active\"><a href=\"javascript:pedirDatos('modulos/ubicacion.php','topstory-txt','ubicacion')\">Ubicación</a></li><li><a href=\"javascript:pedirDatos('modulos/clientes.php','topstory-txt','mclientes')\">Clientes</a></li><li><a href=\"javascript:pedirDatos('modulos/servicios.php','topstory-txt','servicios')\">Servicios</a></li><li><a href=\"javascript:pedirDatos('modulos/contactar.php','topstory-txt','contactar')\">Contactar</a></li><li><a href=\"javascript:pedirDatos('modulos/hosting.php','topstory-txt','hosting')\">Hosting</a></li></ul>";
            }
            if(Sender=="mclientes"){
                document.getElementById('nav').innerHTML="<ul><li><a href=\"javascript:pedirDatos('modulos/inicio.php','topstory-txt','inicio')\">Inicio</a></li><li><a href=\"javascript:pedirDatos('modulos/ubicacion.php','topstory-txt','ubicacion')\">Ubicación</a></li><li class=\"active\"><a href=\"javascript:pedirDatos('modulos/clientes.php','topstory-txt','mclientes')\">Clientes</a></li><li><a href=\"javascript:pedirDatos('modulos/servicios.php','topstory-txt','servicios')\">Servicios</a></li><li><a href=\"javascript:pedirDatos('modulos/contactar.php','topstory-txt','contactar')\">Contactar</a></li><li><a href=\"javascript:pedirDatos('modulos/hosting.php','topstory-txt','hosting')\">Hosting</a></li></ul>";
            }
            if(Sender=="servicios"){
                document.getElementById('nav').innerHTML="<ul><li><a href=\"javascript:pedirDatos('modulos/inicio.php','topstory-txt','inicio')\">Inicio</a></li><li><a href=\"javascript:pedirDatos('modulos/ubicacion.php','topstory-txt','ubicacion')\">Ubicación</a></li><li><a href=\"javascript:pedirDatos('modulos/clientes.php','topstory-txt','mclientes')\">Clientes</a></li><li class=\"active\"><a href=\"javascript:pedirDatos('modulos/servicios.php','topstory-txt','servicios')\">Servicios</a></li><li><a href=\"javascript:pedirDatos('modulos/contactar.php','topstory-txt','contactar')\">Contactar</a></li><li><a href=\"javascript:pedirDatos('modulos/hosting.php','topstory-txt','hosting')\">Hosting</a></li></ul>";
            }
            if(Sender=="contactar"){
                document.getElementById('nav').innerHTML="<ul><li><a href=\"javascript:pedirDatos('modulos/inicio.php','topstory-txt','inicio')\">Inicio</a></li><li><a href=\"javascript:pedirDatos('modulos/ubicacion.php','topstory-txt','ubicacion')\">Ubicación</a></li><li><a href=\"javascript:pedirDatos('modulos/clientes.php','topstory-txt','mclientes')\">Clientes</a></li><li><a href=\"javascript:pedirDatos('modulos/servicios.php','topstory-txt','servicios')\">Servicios</a></li><li class=\"active\"><a href=\"javascript:pedirDatos('modulos/contactar.php','topstory-txt','contactar')\">Contactar</a></li><li><a href=\"javascript:pedirDatos('modulos/hosting.php','topstory-txt','hosting')\">Hosting</a></li></ul>";
            }
            if(Sender=="hosting"){
                document.getElementById('nav').innerHTML="<ul><li><a href=\"javascript:pedirDatos('modulos/inicio.php','topstory-txt','inicio')\">Inicio</a></li><li><a href=\"javascript:pedirDatos('modulos/ubicacion.php','topstory-txt','ubicacion')\">Ubicación</a></li><li><a href=\"javascript:pedirDatos('modulos/clientes.php','topstory-txt','mclientes')\">Clientes</a></li><li><a href=\"javascript:pedirDatos('modulos/servicios.php','topstory-txt','servicios')\">Servicios</a></li><li><a href=\"javascript:pedirDatos('modulos/contactar.php','topstory-txt','contactar')\">Contactar</a></li><li class=\"active\"><a href=\"javascript:pedirDatos('modulos/hosting.php','topstory-txt','hosting')\">Hosting</a></li></ul>";
            }
        }

Sender contiene el ID del elemento sobre el cual se dio el click y lo que me PINTA el item seleccionado es la clase active

suerte y cualquier cosa estamos en contacto.

esta es la pagina donde aplico ese codigo
http://siteecosistemas.com/sitev2/