Cambiar code html al clickear

[lamek]

Hola a todos.

Tengo una web en html y css, y en los links tengo una imagen de fondo que al posar el raton en cima cambia. Mirar mi codigo.

Código HTML:

<li title="link1" class="active"><a href="#" onclick="javascript:">BIENVENIDA</a></li>
	<li title="link2"  class="deplace"><a href="#" onclick="javascript:">FOTOS</a></li>
	<li title="link3"  class="deplace"><a href="#"  onclick="javascript:">CONTACTO</a></li> 

Quiero que al clickear en el link, haga un onclick o alguna cosilla, para que class="active" pase a class="deplace", asi la imagen de link1, link 2 cambiaran... Es como si fuera un conjunto de pestañas...

te voy a poner un ejemplo a ver si nos aclaramos: al iniciar la web, link uno va a estar active, pero cuando clickeo en FOTOS, quiero que class="active" se convierta en "deplace" y que el class="deplace" del link2 cambie, porque de fondo tienen una imagen que al clickear quiero que cambie.
Quiero que ocurra con todos los links, si está el link3 en active, pues que cambie al clickear en otro.

No se si ahora me he explicado bien...


No se si me entendeis...

Espero que me podais ayudar...

[lamek]

Me decis que ninguno sabesi hacer esto, hay otra forma de acerlo o que?

[Panino5001]

Para pasar de una clase a otra, podrías usar className:

Código:

document.getElementById('atributoIDDelElemento').className='nombreClase';

(Vi tu mensaje antes pero está bastante mal redactado y con errores ortográficos, razón por la que no lo leí completo y lo ignoré. Probablemente otros hayan hecho lo mismo. Mejor tomarse más tiempo y escribir más claramente.)

[lamek]

Hola, perdon por la ortografia, tenia algo de prisa.

En 'atributoIDDelElemento' que debo poner?

[Panino5001]

Ey, no es necesario pedir disculpas, lo mío sólo era una sugerencia
Al elemento cuya clase quieras modificar, le agregás un atributo id. Si es un enlace:

Código PHP:

  <a href="ruta.html" id="algo"... 
   

Si es un li:

Código PHP:

  <li id="otro" class="miClase1"... 
   

Los atributos id deben ser únicos (no pueden repetirse en el mismo documento y deben comenzar con letras o _ nunca con números).
Luego, para referenciarlos desde javascript, podés hacerlo con document.getElementById.
Para el primer ejemplo:

Código PHP:

  document.getElementById('algo') 
   

Para el segundo:

Código PHP:

  document.getElementById('otro') 
   

De esa manera, si querés cambiar la clase asignada al li (miClase1) por una nueva llamada miClase2, basta con esto:

Código PHP:

  document.getElementById('otro').className='miClase2'; 
   

[Usa_Firefox]

Gracias

A mi también me ha servido, es lo que buscaba.... antes de crear un nuevo tema

[lamek]

Muchas gracias me ha sido de gran utilidad.

He puesto esto y me a ido perfecto...

Código HTML:

  function cambiarClase2() {
	  document.getElementById('link1').className='deplace';
	  document.getElementById('link2').className='active';
	  document.getElementById('link3').className='deplace';
  }
  function cambiarClase1() {
	  document.getElementById('link1').className='active';
	  document.getElementById('link2').className='deplace';
	  document.getElementById('link3').className='deplace';
  } 
  function cambiarClase3() {
	  document.getElementById('link1').className='deplace';
	  document.getElementById('link2').className='deplace';
	  document.getElementById('link3').className='active';
  }

Gracias de nuevo...

[Panino5001]

Qué bueno que haya servido