Cambiar ID de un elemento con un menú

Hola, tuve que escribir de nuevo esta pregunta porque no quedaba muy clara.

Tengo un DIV que se llama "section5", en mi CSS el ID #section5 tiene una imagen de fondo que deseo cambiar por otras 4 imágenes distintas dependiendo el botón que seleccione:

Código :

<div class="section" id="section5">
<ul>
    CONTENIDO SITIO
    <!--MENU-->    
   <li><a href="#" onclick='changeid()' >- Azul</a></li>
   <li><a href="#" onclick='changeid1()'>- Rojo</a></li>
   <li><a href="#" onclick='changeid2()'>- Verde</a></li>
   <li><a href="#" onclick='changeid3()'>- Amarillo</a></li>
   <li><a href="#" onclick='changeid4()'>- Morado</a></li>
   </ul>
</div>

Código CSS :

#section5{background-color:#09C;}

#section5a{background-color:#F00;}

#section5b{background-color:#0F0;}

#section5c{background-color:#FF0;}

#section5d{background-color:#63F;}

a:link, a:visited, a:hover {color:#FFFFFF;}

Originalmente serían solo 2 imágenes, pero se decidió agregar 3 más. Cuando eran dos imágenes mi código era:

Código Javascript :

function changeid ()
{
var e = document.getElementById("section5a");
e.id = "section5";
}

function changeid1 ()
{
var e = document.getElementById("section5");
e.id = "section5a";
}

Este código funcionaba perfecto para dos imágenes, porque hice dos funciones distintas "changeid" y "changeid1" y todo listo, pueden ver el código funcionando AQUÍ (en lugar de imágenes, color del fondo). Al agregar más imágenes ya no supe cómo hacer la función para poder cambiar el ID de esa seción por otro ID que el usuario seleccione.

El sitio está básicamente terminado y ya que es a pantalla completa sólo puedo cambiar el ID y no la clase, porque el script llama al ID de la "section5". ¿Me he explicado bien? ¿Alguien tiene alguna idea para resolver esto?

Saludos,

Hasta me dan ganas de llorar de la alegría, al fin alguien que viene con problemas específicos, y supo abstraer su problema para poder ayudarle.

Tu muy bien

Aquí tu respuesta: http://jsfiddle.net/elporfirio/mfn0m1m2/2/

La solución se trata de hacer una función única, que reciba 'X' parámetro.

el parámetro 'X' es parte, o el nombre de la clase que vas a asignar. y con esto ya puedes poner 1000000 colores si quieres, todos actúan igual.

Saludos

elporfirio, muchas gracias por tu respuesta la idea es adecuada al modo en como lo has resuelto, el problema es que necesito cambiar un ID y no la clase, mi DIV es:

Código HTML :

<div class="section" id="section5">

la clase: class="section" es una clase que es utilizada en varias secciones, por lo que no puedo cambiarle el nombre...es entonces que: id="section5" carga el fondo y colores de la sección 5 que tengo en mi sitio (en total son 6 secciones).

Si ves en el ejemplo que puse aquí, las "section5a, b, c," etc son IDs (#section5) y no clases (.section5) ese es mi principal problema, tienes idea si esto es posible?

De nuevo, agradezco mucho tu ayuda.

Mmm era demasiado bueno para ser verdad, en fin

http://jsfiddle.net/elporfirio/mfn0m1m2/3/


1. Las dos secciones deben compartir una clase que sea comun entre las dos, en este caso section.
Adicionalmente tienen su clase section#[a-z]

Código HTML :

<div id="section5" class="section section5">
   <ul>
    Contenido
    <!--MENU-->    
   <li><a href="#" onclick="changeid(5,'')">- Azul</a></li>
   <li><a href="#" onclick="changeid(5,'a')">- Rojo</a></li>
   <li><a href="#" onclick="changeid(5,'b')">- Verde</a></li>
   <li><a href="#" onclick="changeid(5,'c')">- Amarillo</a></li>
   <li><a href="#" onclick="changeid(5,'d')">- Morado</a></li>
   </ul>
</div>

<div id="section6" class="section section6">
   <ul>
    FuckThe System
    <!--MENU-->    
   <li><a href="#" onclick="changeid(6,'')">- Azul</a></li>
   <li><a href="#" onclick="changeid(6,'a')">- Rojo</a></li>
   <li><a href="#" onclick="changeid(6,'b')">- Verde</a></li>
   <li><a href="#" onclick="changeid(6,'c')">- Amarillo</a></li>
   <li><a href="#" onclick="changeid(6,'d')">- Morado</a></li>
   </ul>
</div>

Hay que generar las clases correspondientes, igual y otra seccion maneja otros colores, eso lo defines tu:

Código CSS :

.section {
    font-size: 14px;
    font-family: 'arial'
}
.section5,
.section6{
    background-color:#09C;
}
.section5a,
.section6a{
    background-color:#F00;

Y por ultimo la funcion, que recibe ahora 2 parametros, 1 es el número de id (que va despues de section), y 2 es la clave del estilo o clase que le vas a aplicar.

ADEMAS: se re-asigna la clase en comun que comparten. Hay un metodo de solo agregar y quitar las que cambian, pero eso es más rápido con Jquery. En fin

Código Javascript :

function changeid(id, clave){
    var nuevaClase = "section" + id + clave;
    var e = document.getElementById("section" + id);
    /* Checa aqui que la clase que comparten 'section' se tiene que poner también */
    e.className = 'section ' + nuevaClase;
    console.log("section"+ id + clave);
}

Y ya, por "mejores prácticas", evita lo más que se pueda asignar estilos a ID, son poco reusables y si planeas bien el diseño, son inutiles.

Los ID tienen una función ideal que es identificar un elemento Unico en cada Documento HTML, tratemos de dejarlos solo para eso.

elporfirio, siento que te arrebaté la alegría inicial de haber recibido un problema específico, todo por haber asignado estilo a un ID

Esto funcionó perfecto, eres un crack. Te agradezco mucho por tu ayuda y tomo en cuenta tu comentario sobre la asignación de estilos a un ID.

Sobre tu comentario:

elporfirio escribió:

¿Me puedes indicar el nombre del método para buscar más al respecto?

Muchas gracias!

Aquí encontrarás todo lo que necesitas saber:

https://api.jquery.com/category/manipulation/class-attribute/