Crear boton activo con jQuery

[seravifer]

Bueno tengo este codigo html:

Código HTML:

<div id="main-menu"><ul>
<li><div class="icon iconhome"></div><a href="?page_id=12" class="">Autobiografía</a></li>
<li><div class="icon iconresume"></div><a href="?page_id=12">Autobiografía</a></li>
<li><div class="icon"></div><a href="?page_id=15">Proyectos</a></li>
<li><div class="icon icontact"></div><a href="?page_id=18">Contacto</a></li>
</ul></div> 

Y necesito que, por ejemplo cuando estés en la pagina de contacto se active una clase y cuando cambies de pagina se active su respectiva clase y se elmine la de contacte.
La clase que se activa es la misma para todas.

[seravifer]

Nadie sabe como¿?

[Jodorem]

Hola seravifer,

Tienes 2 opciones:

Usar condicional para cada enlace.

Ejemplo con PHP:

Código PHP:

<?
$page_id = $_GET['page_id'];
?>
 
<div id="main-menu"><ul>
<li><div class="icon iconhome"></div><a href="?page_id=12" <? if($page_id == '12'){echo 'class="LaClase"'} ?>>Autobiografía</a></li>
<li><div class="icon iconresume"></div><a href="?page_id=12" <? if($page_id == '12'){echo 'class="LaClase"'} ?>>Autobiografía</a></li>
<li><div class="icon"></div><a href="?page_id=15" <? if($page_id == '15'){echo 'class="LaClase"'} ?>>Proyectos</a></li>
<li><div class="icon icontact"></div><a href="?page_id=18" <? if($page_id == '18'){echo 'class="LaClase"'} ?>>Contacto</a></li>
</ul></div>
 

Si se cumple la condición imprimirá la clase que quieras colocar respectivamente.

Segunda opción:

Como en el titulo del post haces mención de JQuery, supongo que estas usando AJAX de JQuery. Si es el caso, entonces en el evento que haces referencia al click del enlace, añade esto:

Código Javascript:

$('.LaClase').removeClass();
$(this).addClass("LaClase");
 

Si estas usando AJAX deberias sustituir el tag <a> por quizá un <label> para que no te cargue la página.

Estoy lanzando suposiciones ya que no ofreces más detalles.

[seravifer]

Gracias por esponder Jodorem,
la verdad es que he estado mirando por internet y no he encontrado nada, lo único es algo que utilizaban jQuery. Probare a usar lo que tu dices pero no quiero usar mucho php así que utilizare la segunda opción que no funciona por que al clicar en un enlace se recarga la pagina y pierde esa función jQuery.

De momento tengo esto en Javascript y me gustaría que lo tradujeran a jQuery:

Código Javascript:

function addLoadEvent(func) { 
    var oldonload = window.onload; 
    if(typeof window.onload != 'function') { 
        window.onload = func; 
    } else { 
        window.onload = function() { 
            oldonload(); 
            func(); 
        } 
    } 
} 
 
function insertAfter(newElement, targetElement) { 
    var parent = targetElement.parentNode; 
    if(parent.lastChild == targetElement) { 
        parent.appendChild(newElement); 
    } else { 
        parent.insertBefore(newElement, targetElement.nextSibling); 
    } 
} 
 
function addClass(element, value) { 
    if(!element.className) { 
        element.className = value; 
    } else { 
        newClassName = element.className; 
        newClassName+= " "; 
        newClassName+= value; 
        element.className = newClassName; 
    } 
} 
 
function highlightPage() { 
    if (!document.getElementsByTagName) return false; 
    if (!document.getElementById) return false; 
    if (!document.getElementById("main-menu")) return false; 
    var nav = document.getElementById("main-menu"); 
     
    var links = nav.getElementsByTagName("a"); 
    for (var i=0; i<links.length; i++) { 
        var linkurl = links[i].getAttribute("href"); 
        var currenturl = window.location.href; 
         
        if(currenturl.indexOf(linkurl) != -1) { 
            links[i].className = "active"; 
        } 
    } 
} 
 
addLoadEvent(highlightPage);
 

[Jodorem]

seravifer,

Como te habia comentado, deberias de sustituir el tag <a> por quizá un <label> para que no te recargue la página y no se pierda la función JQuery.

Una vez hecho esto, te tocaria programar algo de AJAX para que solo cargue las partes de tu sitio web que quieras que se carguen al hacer click en el "enlace" (lo digo entre comillas porque se supone que ahora lo vas a sustituir por un <label>, y al hacer click realiza la carga por AJAX).

Echate un vistazo a la documentación de AJAX de JQuery, es muy fácil de usar:

http://api.jquery.com/jQuery.ajax/

Personalmente, es mi solución cuando quiero utilizar AJAX.

[seravifer]

Ok, voy a mirarlo. Pero si no quiero usar Ajax ni Jquery¿?

[Jodorem]

Si no quieres usar AJAX ni JQuery, deberás acudir a la primera opción que te di.

[seravifer]

Ok gracias por todo, pero el menu ya no es con page id ahora es:

Código HTML:

<div id="main-menu"><ul>
            <li><div class="icon iconhome"></div><a href="inicio">Inicio</a></li>
            <li><div class="icon iconresume"></div><a href="perfil">Perfil</a></li>
            <li><div class="icon"></div><a href="proyectos">Proyectos</a></li>
            <li><div class="icon icontact"></div><a href="contacto">Contacto</a></li>
            <li><div class="icon iconblog"></div><a href="blog">Blog</a></li>
        </ul></div>
 

[seravifer]

Iniciado por Jodorem

Si no quieres usar AJAX ni JQuery, deberás acudir a la primera opción que te di.

Ok gracias por todo, pero el menu ya no es con page id ahora es:
Código HTML:

Código HTML:

<div id="main-menu"><ul>
            <li><div class="icon iconhome"></div><a href="inicio">Inicio</a></li>
            <li><div class="icon iconresume"></div><a href="perfil">Perfil</a></li>
            <li><div class="icon"></div><a href="proyectos">Proyectos</a></li>
            <li><div class="icon icontact"></div><a href="contacto">Contacto</a></li>
            <li><div class="icon iconblog"></div><a href="blog">Blog</a></li>
        </ul></div>