En este artículo, aprenderemos cómo mostrar/ocultar un elemento usando jQuery . Podemos hacer esto usando métodos jQuery como los métodos css() , show() , hide() y toggle() .
Acercarse:
- Cree un archivo HTML en su sistema local “ index.html ”
- Cree un elemento HTML dentro de la etiqueta <body> , por ejemplo, el párrafo <p> , la imagen <img> , etc.
- Cree un botón usando una etiqueta <button> y adjunte un detector de eventos.
- Usamos este botón para alternar entre mostrar y ocultar la animación. Significa que cuando se muestra el elemento seleccionado y hace clic en el botón ocultar, el código dentro de su detector de eventos debe ocultar el elemento que seleccionó y cambiar el texto de ese elemento o viceversa.
Método 1: Uso de métodos css(): se necesitan dos parámetros, donde el primer parámetro es el nombre de la propiedad y el segundo parámetro es el valor de la propiedad.
$(selector).css(property, value);
Toma un objeto de string JSON de tipo de parámetro y el objeto contiene las propiedades junto con sus valores.
$(selector).css(property);
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
border: 2px solid green;
min-height: 240px;
text-align: center;
}
h1 {
color: green;
}
div {
display: flex;
justify-content: center;
}
.button-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div id="element">
Hello Geeks Welcome to GeeksforGeeks
</div>
<div class="button-container">
<button id="click">
hide
</button>
</div>
<script>
$('#click').on('click', function () {
if ($('#click').text() === 'show') {
// This block is executed when
// you click the show button
$('#click').text('hide');
$('#element').css('display', 'flex');
}
else {
// This block is executed when
// you click the hide button
$('#click').text('show');
$('#element').css('display', 'none');
}
});
</script>
</body>
</html>
Producción:
producción
Método 2: Este método se utiliza para mostrar el elemento oculto y los parámetros que toma son opcionales.
$(selector).show(optional);
Este método se utiliza para ocultar el elemento visible y los parámetros que toma son opcionales.
$(selector).hide(optional);
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
border: 2px solid green;
min-height: 240px;
text-align: center;
}
h1 {
color: green;
}
div {
display: flex;
justify-content: center;
}
.button-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div id="element">
Hello Geeks Welcome to GeeksforGeeks
</div>
<div class="button-container">
<button id="click">
hide
</button>
</div>
<script>
$('#click').on('click', function () {
if ($('#click').text() === 'show') {
// This block is executed when
// you click the show button
$('#click').text('hide');
$('#element').show();
}
else {
// This block is executed when
// you click the hide button
$('#click').text('show');
$('#element').hide();
}
});
</script>
</body>
</html>
Producción:
La salida del método mostrar/ocultar
Método 3: este método oculta el elemento si está visible y muestra el elemento si está oculto. Este método puede realizar las dos funcionalidades del método mostrar y ocultar y el parámetro es opcional.
$(selector).toggle(optional)
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<style>
body {
border: 2px solid green;
min-height: 240px;
text-align: center;
}
h1 {
color: green;
}
div {
display: flex;
justify-content: center;
}
.button-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div id="element">
Hello Geeks Welcome to GeeksforGeeks
</div>
<div class="button-container">
<button id="click">
hide
</button>
</div>
<script>
$('#click').on('click', function () {
if ($('#click').text() === 'show') {
// This block is executed when
// you click the show button
$('#click').text('hide');
}
else {
// This block is executed when
// you click the hide button
$('#click').text('show');
}
$('#element').toggle();
});
</script>
</body>
</html>
Producción:
la salida del método de alternar
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA