Foros del Web » Programando para Internet » Javascript »

Marcar boton seleccionado

Estas en el tema de Marcar boton seleccionado en el foro de Javascript en Foros del Web. Hola. Tengo un menu en donde por clase muestro si es un boton normal o uno seleccionado. Asi: <ul id="navigationMenu"> <li><a href="index.html" class="selectedMenu">HOME</a></li> <li><a href="fotos.php" ...
  #1 (permalink)  
Antiguo 02/11/2011, 19:13
 
Fecha de Ingreso: diciembre-2006
Mensajes: 294
Antigüedad: 15 años
Puntos: 2
Marcar boton seleccionado

Hola. Tengo un menu en donde por clase muestro si es un boton normal o uno seleccionado.

Asi:

<ul id="navigationMenu">
<li><a href="index.html" class="selectedMenu">HOME</a></li>
<li><a href="fotos.php" class="normalMenu">Fotos</a></li>
<li><a href="contacto.html" class="normalMenu">CONTACTO</a></li>
</ul>

Por defecto esta seleccionado el "home".

Ahora, como hago para que cuando hago clic en "fotos" me abra la pagina "fotos.php" y me cambie el class... el "home" pase a ser normal y el "fotos" pase a ser selected?????

Gracias
  #2 (permalink)  
Antiguo 02/11/2011, 19:40
Avatar de Franz1628  
Fecha de Ingreso: marzo-2007
Ubicación: Lima - Perú
Mensajes: 145
Antigüedad: 14 años, 8 meses
Puntos: 26
Respuesta: Marcar boton seleccionado

Puedes usar la propiedad className
aca un ejemplo
Código HTML:
Ver original
  1. <style type="text/css">
  2. .miClase{
  3.     color:green;
  4. }
  5.  
  6. .nuevaClase{
  7.     color:purple;
  8. }
  9.  
  10. <span id="miSpan" class="miClase">Franz Wilder Gualambo Giraldo</span>
  11.  
  12. <script type="text/javascript">
  13.     document.getElementById('miSpan').className = 'nuevaClase';
__________________
En mi Blog puedes ver articulos javascript y más...
@Franz1628
  #3 (permalink)  
Antiguo 02/11/2011, 19:40
Avatar de Hugo_Euan  
Fecha de Ingreso: abril-2011
Ubicación: Mérida, Yucatán, México
Mensajes: 193
Antigüedad: 10 años, 7 meses
Puntos: 71
Respuesta: Marcar boton seleccionado

Hola gesking

Aquí un ejemplo para cambiar la clase de los elementos:

Código Javascript:
Ver original
  1. <html>
  2. <head>
  3. <style>
  4. .example1 {color:#000000; font-size:12; pxtext-decoration:none;cursor:default;}
  5. .example2 {color:#F00; font-size:20px; text-decoration:underline;cursor:pointer;}
  6. </style>
  7. <script language="JavaScript">
  8.     function ChangeClass(e,cl){
  9.         for(var i=0;i<e.attributes.length;i++){
  10.             if(e.attributes.item(i).nodeName=="class"){
  11.                 e.attributes.item(i).nodeValue=cl;
  12.             }
  13.         }
  14.     }
  15. </script>
  16. </head>
  17. <body>
  18. <span class="qwe" onMouseOver="ChangeClass(this,'example2');" onMouseOut="ChangeClass(this,'Example1');">Pasa el Mouse Aqu&iacute;</span>
  19. </body></html>

Pero bueno.... en realidad hay mucha tarea detras de tu menú... para empezar al hacer uso de enlaces <a href> tendrias que enviar una variable que almacene un identificador para el vinculo que se precionó.... recoger el valor.... e instanciar la clase.. mediante una seríe de procesos...

por lo que te recomendaría cambiar esos vinculos por divs.... :3

Saludos y Éxito....

Edito:

mi respuesta quedo incompleta.. lo siento..
lo que me faltó escribir es que al hacer uso de los divs podrias usar Ajax para no redireccionar... sin embargo si no tienes conocimiento de ello será una tarea mas tediosa tal vez....

por lo que al hacer uso de los divs también creo que necesitarias enviar una variable para identificar cual presionaste y así establecerla cuando se vuelva a cargar la página...

Saludos....
__________________
Se acepta Karma (:

Si Dios con nosotros, quien contra nosotros !!

Última edición por Hugo_Euan; 02/11/2011 a las 19:47

Etiquetas: html, marcar, php, seleccionado, botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 15:57.