Как сделать кнопку скрыть показать
Добавил пользователь Владимир З. Обновлено: 05.10.2024
В этой статье мы обсудим способы включения и отключения кнопки. Сначала мы рассмотрим, как это делается с помощью простого JavaScript, а затем разберемся, как данный процесс выглядит в случае использования jQuery.
JavaScript – один из самых популярных языков программирования, применяемых в веб-разработке. Он используется на большинстве сайтов, и все современные браузеры поддерживают его по умолчанию. В этом руководстве мы рассмотрим полезные приемы, которые помогут вам освоить разработку на JavaScript.
В HTML для кнопок предусмотрено собственное состояние, и таким образом, вы можете активировать или отключать кнопки по желанию. К примеру, во время загрузки формы на странице можно деактивировать кнопку, а затем включить ее с помощью JavaScript.
Сейчас на конкретных примерах мы рассмотрим, как можно включать и отключать кнопки с помощью JavaScript.
Включение и отключение кнопки на чистом JavaScript
В этом разделе мы разберем пример кода на чистом JavaScript, который активирует и отключает кнопку. Посмотрите на приведенный ниже фрагмент кода:
Данный код создает простейшую форму с двумя полями для ввода текста и кнопкой для отправки введенных данных на сервер. Важно отметить, что во время загрузки страницы кнопка формы находится в отключенном состоянии – для этого в коде по умолчанию используется свойство disabled .
После загрузки формы в коде предусмотрено событие onchange , связанное с изменением состояния текстовых полей для ввода имени и пароля пользователя. Как только пользователь введет какие-либо данные в любое из этих полей, событие onchange сработает, и вызовет функцию включения и отключения кнопки toggleButton .
Функция toggleButton проверяет, ввел ли пользователь данные в оба обязательных поля. Если пользователь ввел имя и пароль, функция изменит состояние disabled на false , что в итоге приведет к активации кнопки отправки введенных данных. Если же одно из обязательных полей осталось незаполненным, свойство disabled получает параметр true , и как следствие этого, кнопка остается неактивной.
В приведенном выше примере для создания кнопки используется элемент , но при желании также можно использовать HTML-кнопку , как показано ниже:
Вот так и выглядит активация и отключение кнопки на чистом JavaScript. В следующем разделе мы рассмотрим, как включать и отключать кнопки при работе с библиотекой jQuery.
Активация и отключение кнопок на jQuery
Теперь разберемся, как реализовать включение и деактивацию кнопок при помощи библиотеки jQuery. Для этого обратимся к примеру кода из предыдущего раздела. Далее показано как выглядит код при использовании jQuery:
Прежде всего, данный код загружает библиотеку jQuery, чтобы мы могли воспользоваться ее средствами для реализации нашей функции. Для изменения состояния кнопки в данном случае используется метод jQuery-объекта, attr .
Метод attr используется в jQuery для установления и получения значений определенных атрибутов элемента. Если передать методу один аргумент, он вернет значение атрибута объекта. При использовании двух аргументов метод установит новое значение атрибута. В нашем случае метод используется для задания значения disabled атрибуту кнопки. Весь остальной код остается без изменений.
Если вы работаете с jQuery 1.5+, вместо метода attr следует использовать prop , как показано во фрагменте кода, приведенном ниже:
Если же вам потребуется удалить какой-то из атрибутов элемента, можно воспользоваться методом removeAttr . Результат будет таким же, что и при использовании параметра false для свойства disabled :
Заключение
В этом руководстве на двух конкретных примерах мы рассмотрели различные способы активации и отключения кнопки – с помощью чистого JavaScript, и с использованием библиотеки jQuery.
Пожалуйста, оставляйте свои отзывы по текущей теме материала. За комментарии, лайки, отклики, дизлайки, подписки низкий вам поклон!
Задача заключается в том, чтобы нажав на ссылку/кнопку, появлялся/скрывался элемент (изображение, таблица, блок и т.д.). Для чего достаточно добавить небольшой CSS, скрипт не нужен.
- количество элементов на странице с class="del" может быть сколь угодно велико
- id — идентификационный номер. Должен быть индивидуальным на html странице
- for должен совпадать с id
- если первоначально нужен невидимый элемент, который в последствии появляется, нужно убирать checked="checked"
Кнопка, нажав на которую появляются/прячутся комментарии Blogger
Все действия производим на вкладке "Шаблон".
Шаг 1. Два вхождения кодазаменяем на
Шаг 2. Выделенные участки кодазаменяем на
Показать/скрыть содержимое гаджета Blogspot
Результат можно посмотреть в Приложении 1.
Тренироваться будем на гаджете "Архив блога". Активизируем вкладку "Шаблон".
Шаг 1. Кодзаменяем на
Шаг 2. Выделенные участки кодазаменяем на
65 комментариев:
PANIC Спасибо! Очень полезная вещь!
Правда, у Вас написано в самом начале: "добавив ПЕРЕД: личный код", а дальше пишите, что ПОСЛЕ. В ходе испытаний разобрались. Сначала было не понятно, что для каждого одинакового по сути эффекта надо свое имя придумывать.
Еще раз спасибо) давно что-то подобное требовалось :) NMitra Благодарю! Очень ценное замечание. Опечатки исправила. Побольше бы таких сознательных читателей. PANIC а теперь я запуталась - надо все-таки перед или после? я вставила код после и все работает. NMitra Перед. А то получится между небом (head) и землёй (body).
Pavas Спасибо, очень помогло! А как можно сделать, чтобы ссылка, по которой кликаешь, чтобы показать скрытый текст, после его появления исчезала? NMitra Попробуйте как-то так:
Думал тут найти красивый спойлер без доп. библиотек NMitra У меня она же. В вашем примере добавлен идентификатор MVM, а так код тот же. С помощью ID вы показываете какой именно div нужно скрывать/показывать.
label[for="raz"]:hover Mails здорово, спасибо. А если у меня не 1 кнопка с скрытым текстом, а 4 штуки. И они должны идти последовательно вроде этого:
Описание:
выплывающий текст
Рекомендации:
выплывающий текст
Важная информация:
выплывающий текст
Ингридиенты:
выплывающий текст
Как сделать так, чтобы например принажатии на 1 кнопку, оставшиеся 3 остальные кнопки спускались вниз вконец открывающегося текста 1 кнопки. .
NMitra На ваш выбор:
Анонимный Спасибо! Анонимный Здравствуйте, а подскажите пжл. как реализовать кнопку "показать еще" при нажатии которой открывается 4 блока, затем нажимаешь ее еще раз еще 4 блока и так до бесконечности . NMitra Здравствуйте. можно на JS (поддержка, начиная с IE8)
.del + label display: block;
max-width: 6em;
text-align: center;
> Unknown как сделать так что бы в таб можно было вставлять не только слова html css но и целуе блоки, например с картинкой . NMitra Вставьте вместо текста, блоки или картинки :)
Примеры как на jQuery и показывать скрывать определенный текст по клику на ссылку или кнопку.
Показ блока по клику
Пример:
Изменение текста в кнопке
Пример:
Изменение кнопки
Показать и скрыть часть текста
Если нужно скрыть длинный текст, то можно сделать блок с фиксированной высотой и эффектом плавного затухания текста.
Пример:
Комментарии 2
Подскажите, а как сделать чтоб раскрывалась часть текста если несколько блоков? Ато теперь применил второй вариант, у меня четыре блока, но раскрываются все а не по одному. Как реализрвать, чтоб раскрывались по отдельности каждый блок а не все сразу?
Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.
Как сделать кнопку "Закрыть" и скрыть элемент со страницы
В статье рассмотрены очень простое и удобное решения того, как добавить к элементу на сайте надпись "Закрыть" или кнопку-крестик, которая дает возможность посетителю скрыть со страницы ненужный элемент или закрыть определенный блок, просто кликнув по ней.
Реализация потянет всего на несколько строк программного кода, так как сделать такой функционал на сайте или в блоге довольно легко при помощи CSS или используя jQuery. В зависимости от выбранного варианта, кнопку для каждого выбранного блока можно добавить вручную, через самостоятельное редактирование кода страницы, или программно - с помощью скрипта.
ПРИМЕР
Для обозначения кнопки я использовал вот такое изображение в виде крестика , с абсолютным позиционированием относительно основного блока. Общая HTML-конструкция примера выглядит так:
.pop-block <
display: inline-block;
position: relative; /* указывать обязательно */
width: 30%;
height: 300px; /* высота всего блока */
margin: 1%;
>
.close-block <
display: block;
position: absolute;
top: 8px;
right: -8px;
width: 16px;
height: 16px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAElBMVEXqAAD8oaH/AAD/ra3/vr7///91+I/7AAAAQklEQVR42oXPwQoAIAgD0JXu/385FfTQgnYweKAp9pUXmE+swAFWAG8owQBTqjQQ8SQOcAdRQVtkqHy7dDFd/X/tAVqqAopyUfkOAAAAAElFTkSuQmCC);
cursor: pointer;
>
.pop-block p <
width: 100%;
height: auto;
>
Вариант 1. Кнопка "Закрыть" только на CSS
Чтобы сделать исчезновение элемента по клику с помощью CSS, можно воспользоваться тегом формы . Для этого к основному коду блока потребуется добавить несколько новых тегов:
Если на странице не один блок, который нужно скрыть, то при использовании этого варианта для каждого добавленного тега нужно указывать уникальный идентификатор и добавлять для него код CSS.
Вариант 2. Автоматическое добавление кнопки-крестика на jQuery
Использование JavaScript(jQuery) позволяет избавиться от внесения дополнительного HTML-кода в документ для каждого блока, который нужно скрыть, если он не один - это существенно:
В примере, вручную кнопка закрытия установлена только к первому элементу, к двум другим, кнопка добавляется автоматически, с помощью скрипта:
$(function() <
$ ('.pop-block').each(function() <
var closeTrigger = $(this).find('.close-block').length;
if (closeTrigger ');
>else <
return '';
>
$('.close-block').on('click', function() <
$(this).closest('.pop-block').fadeOut(100);
>);
>);
>);
Алгоритм скрипта следующий: у всех указанных блоков, провести проверку на наличие в каждом элемента кнопки, если нет, то добавить, ничего не делать если присутствует. По клику на кнопку, скрыть ближайший блок с указанным селектором.
Веб-разработчикам приходится скрывать элементы веб-страниц по самым разным причинам. Например, есть кнопка, которая должна быть видимой при просмотре сайта на мобильном устройстве, и скрытой — при использовании настольного браузера. Или, например, имеется некий навигационный элемент, который должен быть скрыт в мобильном браузере и отображён в настольном. Элементы, невидимые на странице, могут пребывать в различных состояниях:
- Некий элемент совершенно невидим и, более того, удалён из потока документа.
- Глазами элемент не увидеть, но он присутствует в документе и доступен для ассистивных технологий наподобие средств для чтения с экрана.
- Элемент видим, но скрыт от средств для чтения с экрана.
HTML5-атрибут hidden
Hidden — это логический HTML-атрибут, скрывающий элементы, которым он назначен. Когда браузер загружает страницу, он не выведет элементы с атрибутом hidden , за исключением тех случаев, когда видимость элементов будет включена вручную средствами CSS. Действие этого атрибута похоже на применение к элементу CSS-правила display: none .
Рассмотрим следующий пример:
Тут имеется разметка, задающая заголовок, изображение и описание. Изображение должно выводиться только в том случае, если ширина области просмотра превышает 400px . К элементу я добавил атрибут hidden .
В CSS я воспользовался атрибутом hidden для вывода элемента только в том случае, если область просмотра страницы имеет необходимый размер.
Фрагмент веб-страницы
Вот CSS-код, который здесь использован:
→ Вот пример этой страницы на CodePen
Тут у вас может появиться вопрос о том, почему бы просто не использовать display: none . Хороший вопрос. Когда селектор изображения вызывается через его атрибут hidden , мы можем быть уверены в том, что даже если CSS-код по какой-то причине не загрузился, элемент будет скрыт.
▍Атрибут hidden и доступность контента
Если рассмотреть атрибут hidden с точки зрения доступности контента, то окажется, что этот атрибут полностью скрывает элемент. В результате с этим элементом не смогут работать средства для чтения с экрана. Не используйте этот атрибут в тех случаях, когда некие элементы страниц нужно делать невидимыми для человека, но не для программ для чтения с экрана.
CSS-свойство display
Каждый элемент веб-страницы обладает неким значением свойства display , назначаемым ему по умолчанию. Это может быть inline-block , block , table и так далее. Для того чтобы скрыть элемент с помощью свойства display , мы можем воспользоваться конструкцией display: none . Если элемент скрыт с помощью этой конструкции, то вместе с ним будут скрыты и все его потомки.
Представим, что мы хотим скрыть изображение из предыдущего примера и решили воспользоваться следующим CSS-кодом:
Синюю книгу убрали из стопки
Вот анимированный вариант примера с книгами, показывающий то, что происходит в том случае, если одну из них убирают из стопки.
Если убрать книгу из стопки — положение других книг в ней изменится
▍Производится ли загрузка ресурсов, скрытых средствами CSS?
Здесь можно найти демонстрацию работы с изображением, скрытым средствами CSS. Если исследовать этот пример, открыв инструменты разработчика Chrome и посмотрев на вкладку Network , там можно увидеть соответствующий запрос.
Исследование страницы, содержащей скрытое изображение
▍Элемент style
Тут стоит упомянуть о том, что существуют HTML-элементы, свойство display которых по умолчанию установлено в значение none . Например, это элемент
Читайте также: