Cambiar clase "active" a elemento seleccionado

reynierpm · #1 (**permalink**) 12/03/2013, 21:06

Hola, tengo el siguiente marcado HTML:

Código HTML:

<ul class="nav">
  <li class="active"><a href="#">Enlace 1</a></li>
  <li><a href="#">Enlace 2</a></li>
  <li><a href="#">Enlace 3</a></li>
</ul>

y necesito cambiar la clase "active" al elemento sobre el cual haya hecho clic. He probado con los siguientes codigos:

Código:

$(function() {
    $('.nav li a').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        $this.closest('ul').children('li').removeClass('active');
        $this.parent().addClass('active');
    });
});

Código:

    $('.nav li a').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        $this.closest('ul').children('li').removeClass('active');
        $this.parent().addClass('active');
    });

Y no me funciona que estoy haciendo mal?

IsaBelM · #2 (**permalink**) 13/03/2013, 04:35

el primer error que cometes es usar enlaces que no redireccionan a ningún sitio.

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=iso-8859-1" />
<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>

chuidiang · #3 (**permalink**) 13/03/2013, 07:32

Hola:

He copiado tu código todo junto, he añadido un style para ver el cambio y parece que funciona bien, el puntito de delante de los <li> se cambia de color

Código HTML:

Ver original<html>
   <head>
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <style>
         .active {
            color:red;
         }
      </style>
   </head>
   <body>
      <script>
      $(function() {
       $('.nav li a').click(function(e) {
           e.preventDefault();
           var $this = $(this);
           $this.closest('ul').children('li').removeClass('active');
           $this.parent().addClass('active');
       });
      });
   </script>
   <ul class="nav">
     <li class="active"><a href="#">Enlace 1</a></li>
     <li><a href="#">Enlace 2</a></li>
     <li><a href="#">Enlace 3</a></li>
   </ul> 
</body>
</html>

Se bueno.