borrar una clase y activar otra

Telúrico · #1 (**permalink**) 08/05/2012, 08:08

Muy buenas.

Tengo un menu con cuatro opciones de hacer click, y al pinchar en cada una, se cambia el contenido de la web, pero la url siempre es la misma, es decir, no cambio de HTML

Queria saber como se haría para uqe al pinchar en cada menú, al que le he hecho click se le active un estilo determinado y se quede activado, y el menu que estaba activo se le borre la clase que tenía.

Me imagino que se hace con removeClass y addClass.. pero no se muy bien como conseguir lo que uqiero :(

rossijona · #2 (**permalink**) 08/05/2012, 08:12

Buenas,

es así:

Código:

$('.clase_del_boton_que_tocas').click(function(){

$(this).removeClass('clase_a_remover');

$(this).addClass('clase_a_agregar');

return false;

});

IsaBelM · #3 (**permalink**) 08/05/2012, 08:14

mi recomendación es hacerlo con la pseudo clase :checked de css
aquí tienes la base

Dafonz · #4 (**permalink**) 08/05/2012, 08:19

O con not para excluir a la que dieron click... por ejemplo:

Código Javascript:

Ver original$('.links').click(function() {
            $(this).addClass("activo");
            $('.links').not(this).removeClass("activo");
        });

.links = todos los links
this = al que se le dio click
al aplicarle .not = todos los links excepto el que se le dio click

Telúrico · #5 (**permalink**) 08/05/2012, 09:05

he probado el codigo de "rossijona" y lo he dejado así, pero no ha funcionado, no hace NAAAADA de nada :(, ¿porque puede ser?

Código:

<script type="text/javascript">
			$('.azul').click(function(){

			$(this).removeClass('azul');

			$(this).addClass('rojo');

			return false;

			});
		</script>
		<style text="type/css">
			.azul{background-color:blue;color:white;}
			.rojo{background-color:red;}
			.negro{background-color:black;color:white;}
			.verde{background-color:green;}
		</style>
		
	</head>
	
	<body>
		<div class="azul">primero</div><br>
		<div class="segundo">segundo</div><br>
		<div class="tercero">tercero</div><br>
		<div class="cuarto">cuarto</div><br>
	</body>

Dafonz · #6 (**permalink**) 08/05/2012, 09:18

Porque no estas metiendo la función en el document ready o algo parecido, a parte que ahí solo estas diciendo que para el primer link cuando le de click cambie pero solamente ese link.
El codigo que dejo rossijona aunque tiene la base no es la solución para lo que planteas tal cual esta.
Te recomiendo antes de estar solo copiando los códigos veas un tutorial de lo basico algo como: Getting Started with jQuery

Telúrico · #7 (**permalink**) 08/05/2012, 12:41

Esque a ver. Obviamente lo ideal ideal, sería que manejara perfectamente javascript, eso seria lo perfecto, de ser así no entraría en un foro preguntando estas cosas.

Y los foros entre otras cosas están para ir ayudando a la gente que no sabemos de "x" cosa con los códigos que vamos necesitando, para que poco a poco vayamos aprendiendo sin necesidad de estar estancados.

Si tuviera tiempo de aprender Javascript... creeme, ya lo habria aprendido, pero no es el caso. Y si solicito ayuda en el código con el que tengo problema, es porque pienso (a lo mejor desde mi ignorancia por su puesto), que no es muy complicado, y que a alguien que maneja no le va a llevar mucho tiempo hecharme una mano.

Dafonz · #8 (**permalink**) 08/05/2012, 12:54

Créeme hasta con el titulo "Getting Started with jQuery" se ve que no te manejaras perfectamente la librería, y todos a veces nos atoramos en cosas.. pero es muy diferente tener una idea y no saber como solucionar el problema.. a solo apuntar y decir quiero eso..

Ahora con lo de tu problema yo te había puesto una solución al igual que IsaBelM en las cuales aplicando eso debería hacer exactamente lo que quieres..

en mi caso:

Código Javascript:

Ver original$('.links').click(function() {
            $(this).addClass("activo");
            $('.links').not(this).removeClass("activo");
        });

Código HTML:

Ver original<style text="type/css">
            .activo{background-color:blue;color:white;}
        </style>
<div class="links">primero</div><br>
        <div class="links">segundo</div><br>
        <div class="links">tercero</div><br>
        <div class="links">cuarto</div><br>

Telúrico · #9 (**permalink**) 08/05/2012, 13:31

pues la verdad... a mi ese código no me hace nada de nada xDD.

Será mi navegador... o a saber... xD

Lo que estoy queriendo hacer tiene algún nombre concreto? es para buscar bien por google :)

Telúrico · #10 (**permalink**) 10/05/2012, 01:08

Al final lo s0olucioné con el codigo de Dafonz.

Me faltaba iniciar el documento js con:

"$(document).ready(function()"

Lo cual demuestra mi "gran" conocimiento en javascript xDD

Muchas gracias ;)