Cómo añadir la clase active en menú de navegación al seleccionar un enlace

Xanina · 27 Feb 2014

hola, tengo un menú hecho en html5 y estilado con css3, de modo que cuando pasa el ratón por encima cambia de color, y mientras se clica se pone una sombra para que se vea que se está clicando...

el problema, es que una vez seleccionado un link del menú en cuestión, no me deja marcado distinto el link que he pinchado, de modo que no sé en qué página estoy, pues el menú no lo indica...

sé que se trata de stylarlo con li.active en el fichero de css, pero no sé como hacer para que automáticamente le ponga class="active" en el link en el que clico

espero vuestra inestimable ayuda, gracias
Xanina

Josepdal · 27 Feb 2014

Xanina dijo:
hola, tengo un menú hecho en html5 y estilado con css3, de modo que cuando pasa el ratón por encima cambia de color, y mientras se clica se pone una sombra para que se vea que se está clicando...

el problema, es que una vez seleccionado un link del menú en cuestión, no me deja marcado distinto el link que he pinchado, de modo que no sé en qué página estoy, pues el menú no lo indica...

sé que se trata de stylarlo con li.active en el fichero de css, pero no sé como hacer para que automáticamente le ponga class="active" en el link en el que clico

espero vuestra inestimable ayuda, gracias
Xanina

Puedes hacerlo por php, o simplemente, si es un menú pequeño, mostrar en cada página que está active.

Si estás en el index, en el código en el index pones active.
si está en equipo, en equipo.html pones en ese div active...

Por php, sería con la funcion que compare el nombre del archivo en que está y si coincide, que se muestre la funcion active.

Xanina · 27 Feb 2014

sí es un menú pequeño, así que lo pondré a mano como dices, eso sé hacerlo, pero pensé que había otra manera más mejor :ambivalence:

de php no controlo, después de mucho leer por internet, creo que con jquery.js también se puede hacer, pero tampoco sé...

gracias por tu pronta respuesta, un saludo
Xanina

jfgancia · 1 Mar 2014

Xanina dijo:
sí es un menú pequeño, así que lo pondré a mano como dices, eso sé hacerlo, pero pensé que había otra manera más mejor :ambivalence:

de php no controlo, después de mucho leer por internet, creo que con jquery.js también se puede hacer, pero tampoco sé...

gracias por tu pronta respuesta, un saludo
Xanina

Si estas trabajando en una plataforma como wordpress lo podes automatizar, si es html puro edita a mano.
Si queres automatizar en wordpress contestame este msj y te ayudo con eso.
Saludos

nemesis866 · 1 Mar 2014

Hola, lo puedes hacer por medio de CSS, te muestro un ejemplo.-

HTML:

<body id="pagIndex">
<nav>
    <ul>
        <li id="nav1"><a href="#">Inicio</a></li>
        <li id="nav2"><a href="#">Contacto</a></li>
    </ul>
</nav>

HTML:

#pagIndex #nav1, #pagContacto #nav2
{
    background: #ddd;
}

Solo ten cuidado con el identificador de la estiqueta body, si estas en el index el id es pagIndex y si estas en la pagina contacto el id es pagContacto, de esta forma te marcara el item del menu segun en la pagina que estes.

Saludos

bertocoder · 3 Mar 2014

Hola Xanina ya hubo un tema que cubria eso mismo :

http://forobeta.com/php/257127-duda-li-class-active.html

te recomiendo buscar un poco antes de abrir un tema nuevo y te ahorraras tiempo.

SLds

rvalaya · 3 Mar 2014

Con jquery se podría hacer algo:

Código

Insertar CODE, HTML o PHP:

<ul id="navi">
    <li><a class="menu" href="#">About MHG</a></li>
    <li><a class="menu" href="#">Workout Programs</a></li>
    <li><a class="menu" href="#">Fitness Tips</a></li>
    <li><a class="menu" href="#">Contact Us</a></li>          
    <li><a class="menu" href="#">Read Our Blog</a></li>
  </ul>

jQuery:

Insertar CODE, HTML o PHP:

$('a.menu').click(function(){
    $('a.menu').removeClass("active");
    $(this).addClass("active");
});

Ejemplo: Edit fiddle - JSFiddle

Xanina · 3 Mar 2014

muchas gracias por la respuesta, es html puro, no es wordpress

---------- Post agregado el 04-mar-2014 hora: 01:45 ----------

PERFECTO!!! eres un crack!! justo lo que estaba buscando!!! :welcoming:

Ya lo he probado y funciona perfectamente :eagerness:... no es que dudara de tu solución... sólo de mi interpretación

Mil gracias!! :eagerness:

---------- Post agregado el 04-mar-2014 hora: 01:47 ----------

bertocoder dijo:
Hola Xanina ya hubo un tema que cubria eso mismo :

http://forobeta.com/php/257127-duda-li-class-active.html

te recomiendo buscar un poco antes de abrir un tema nuevo y te ahorraras tiempo.

SLds

antes de preguntar te prometo que busqué, de echo leí ese artículo, pero como de php ni papa...
pero gracias por el apunte

---------- Post agregado el 04-mar-2014 hora: 01:48 ----------

muchas gracias, pero como de javascript ando bastante pez y ya me lo han resuelto con css que era lo que yo buscaba... tema liquidado

---------- Post agregado el 04-mar-2014 hora: 01:53 ----------

TEMA SOLUCIONADO!!
Muchas gracias a todos por vuestras respuestas, finalmente nemesis866 me dio justo la solución que yo buscaba, con css