Cambiar clase a ítem de menu

Mariano_Floyd · #1 (**permalink**) 06/03/2013, 20:15

Buenas de nuevo, Hace poco pregunte como se llamaba la técnica de smooth scrolling (que en ese momento ni sabia que se llamaba asi xD), después de leer bastante sobre el tema, logre realizarlo, pero me surgió otro inconveniente que no soy capas de resolver. He puesto anclas en diferentes partes de la web para llevar a cabo el efecto anteriormente nombrado, pero no se como hacer para que el ítem del menú correspondiente a una sección de la web cambie de estilo (cambiarle el color básicamente). Es decir, que si los botones son negros, al hacer click en cualquiera de ellos, no solo me lleve a otra sección, sino también que cambie de color a modo de diferenciarlo como activo. Leí que se podía hacer con js, creando una clase en css y luego asignársela con js, pero sinceramente no se mucho de dicho lenguaje, agradecería enormemente si pudieran darme una mano con el tema. Desde ya, les agradezco.
Saludos.

IsaBelM · #2 (**permalink**) 07/03/2013, 08:10

si comprendes este código, lo harás

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.activo {color:#FF0000;}
.inactivo {color:#000000;}
</style>
<script type="text/javascript">
window.onload = function() {
divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
divs[i].onclick = function() {
for (var j = 0; j < divs.length; j++) {
divs[j].className = (this.id == divs[j].id) ? 'activo' : 'inactivo';
}
}
}
}
</script>
<head>
</head>
<body>
<div id="menu1" class="inactivo">menu</div>
<div id="menu2" class="inactivo">menu</div>
<div id="menu3" class="inactivo">menu</div>
<div id="menu4" class="inactivo">menu</div>
</body>
</html>

Mariano_Floyd · #3 (**permalink**) 07/03/2013, 08:23

Antes que nada, gracias por tomarte el tiempo para responder. Al código lo entiendo un poco, ahora me surge una duda, yo al menú lo tengo armado con una lista desordenada <ul> dentro de una etiqueta <nav>. Debería reemplazar los "divs" del script por "ul"?

emprear · #4 (**permalink**) 07/03/2013, 08:52

Cita:

Iniciado por Mariano_Floyd

Antes que nada, gracias por tomarte el tiempo para responder. Al código lo entiendo un poco, ahora me surge una duda, yo al menú lo tengo armado con una lista desordenada <ul> dentro de una etiqueta <nav>. Debería reemplazar los "divs" del script por "ul"?

no, debes reemplazar
divs = document.getElementsByTagName('div');
por la etiqueta a la que le apliques el cambio de clase

divs = document.getElementsByTagName('li'); por ejemplo
ó quizás hayas hecho esto
<li><a href="#" class="inactivo">item</a></li>
por lo que habría que aplicarlo a los <a>, todo depende de la estructura de tu menu