Marcar boton seleccionado

gesking · #1 (**permalink**) 02/11/2011, 19:13

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

Franz1628 · #2 (**permalink**) 02/11/2011, 19:40

Puedes usar la propiedad className
aca un ejemplo

Código HTML:

Ver original<style type="text/css">
.miClase{
    color:green;
}
 
.nuevaClase{
    color:purple;
}
</style>
 
<span id="miSpan" class="miClase">Franz Wilder Gualambo Giraldo</span>
 
<script type="text/javascript">
    document.getElementById('miSpan').className = 'nuevaClase';
</script>

Hugo_Euan · #3 (**permalink**) 02/11/2011, 19:40

Hola gesking

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

Código Javascript:

Ver original<html>
<head>
<style>
.example1 {color:#000000; font-size:12; pxtext-decoration:none;cursor:default;}
.example2 {color:#F00; font-size:20px; text-decoration:underline;cursor:pointer;}
</style>
<script language="JavaScript">
    function ChangeClass(e,cl){
        for(var i=0;i<e.attributes.length;i++){
            if(e.attributes.item(i).nodeName=="class"){
                e.attributes.item(i).nodeValue=cl;
            }
        }
    }
</script>
</head>
<body>
<span class="qwe" onMouseOver="ChangeClass(this,'example2');" onMouseOut="ChangeClass(this,'Example1');">Pasa el Mouse Aqu&iacute;</span>
</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....