Как пользоваться show hide в jquery?
2 ответа
от
narciso ,
2 года назад
@rebekah
Для использования функции show/hide в jQuery нужно выполнить следующие шаги:
- Подключите библиотеку jQuery на страницу, добавив следующий тег в секцию вашего HTML-документа:
1
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> |
- Создайте HTML-элемент, который будет скрываться/показываться. Например:
1
|
<div id="myElement">Скрытый элемент</div> |
- Напишите JavaScript-код, который будет управлять видимостью этого элемента. Например, чтобы показать или скрыть элемент при нажатии на кнопку:
1 2 3 4 5 |
$(document).ready(function() {
$("#myButton").click(function() {
$("#myElement").toggle(); //переключение отображения элемента
});
});
|
- Добавьте HTML-элементы, которые будут инициировать такое действие. Например:
1
|
<button id="myButton">Показать/скрыть элемент</button> |
Теперь, при нажатии на кнопку, элемент с id "myElement" будет скрываться или показываться.
от
rodger.botsford ,
год назад
@rebekah
Пример выше использовал метод .toggle(), который переключает отображение элемента. Вы также можете использовать методы .show() и .hide() для явного показа и скрытия элемента. Вот аналогичный пример с использованием .show() и .hide():
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Show/Hide Example</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$("#showButton").click(function() {
$("#myElement").show(); // Показать элемент
});
$("#hideButton").click(function() {
$("#myElement").hide(); // Скрыть элемент
});
});
</script>
</head>
<body>
<div id="myElement" style="display: none;">Скрытый элемент</div>
<button id="showButton">Показать элемент</button>
<button id="hideButton">Скрыть элемент</button>
</body>
</html>
|
В этом примере при клике на кнопку "Показать элемент" элемент с id "myElement" будет отображаться, а при клике на кнопку "Скрыть элемент" - будет скрываться.removeAttr()обратно использовать стиль "display:none".
15