30/01/2023 jquery 3m 43s 0 7799
En estos últimos años la velocidad de carga de los sitios webs ha ido cobrando cada vez más importancia debido principalmente a 2 factores,...
Cambiar la clase de un elemento con jquery
11 de /junio06 de /2014
3m
jquery
0 comentarios
4193
Este script cambia la clase de un elemento de una página en respuesta a una acción del usuario, es un ejemplo muy básico, al situar el ratón sobre cualquier enlace del documento, aplica a un elemento con identificador “didesweb” la clase “nuevaclase”, al quitar el ratón del enlace, elimina la clase “nuevaclase” del elemento con identificador “didesweb”.
Creamos un documento HTML5 en el que dos elementos <p>, en el primero creamos un enlace, en el segundo agregamos cualquier contenido .
El codigo HTML
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p><a href="#">Situa el ratón sobre este enlace</a></p>
<p id="didesweb">Este es el elemento sobre el que se ejecuta la función</p>
</body>
</html>Ahora creamos el CSS, solo vamos a escribir el codigo necesario para este manual, creamos una clase que solo se va a activar en función del script que vamos a crear con jQuery, por el momento no hace nada.
El codigo CSS
.nuevaclase {
background: #DEDEDE;
color: #d78500;
text-decoration: underline;
}Por ultimo creamos el script, dentro de un evento “ready” como de costumbre, ($(document).ready(function(){…});), creamos una función que al posicionar el ratón sobre un elemento <a> agregue una clase al elemento con identificador “didesweb”
El script
$(document).ready(function(){
$("a").mouseover(function(event){
$("#didesweb").addClass("nuevaclase");
});
});Si queremos que al quitar el mouse del enlace, este vuelva a tener la clase que tenia o ninguna (si no tenia ninguna), tendremos que agregar al script este código
$("a").mouseout(function(event){
$("#didesweb").removeClass("nuevaclase");
});El codigo completo
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.nuevaclase {
background: #DEDEDE;
color: #d78500;
text-decoration: underline;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("a").mouseover(function(event){
$("#didesweb").addClass("nuevaclase");
});
$("a").mouseout(function(event){
$("#didesweb").removeClass("nuevaclase");
});
});
</script>
</head>
<body>
<p><a href="#">Situa el ratón sobre este enlace</a></p>
<p id="didesweb">Este es el elemento sobre el que se ejecuta la función</p>
</body>
</html>Puedes ver y descargar el código de este archivo en mi cuenta de GitHub.
Quizás te interese ...
22/03/2020 jquery 1m 20s 0 6542
Los parámetros de url son muy útiles para pasar datos a aplicaciones web, hoy en día su uso se está extendiendo más gracias a NodeJS, el...
6/12/2015 jquery 6m 40s 3 8141 4.7
¿Cuantas funciones js hay en total en nuestro sitio web? Conforme va creciendo nuestro sitio, necesitamos incluir funciones que normalmente...
10/06/2015 jquery 10m 53s 1 4751 5
La barra de navegación (navbar) es sin duda una de las piezas fundamentales de un proyecto, pero no por ello se ha de construir un devorador...
Valoraciones
Sé el primero en valorar