Как сделать чтобы кнопка исчезла после нажатия

Добавил пользователь Morpheus
Обновлено: 18.09.2024

Я пытаюсь сделать код, чтобы кнопка менял цвет и не могла быть нажата снова после того, как она нажата один раз. Код делает все это, за исключением того, что он изменяет все три кнопки, на которые я хочу воздействовать, когда вы нажимаете только одну кнопку.

Я хочу иметь возможность щелкнуть одну из кнопок, и только эта кнопка изменит цвет и не сможет быть нажата вместо того, чтобы все кнопки менялись при нажатии одной кнопки.

Ответы 2

Чтобы сделать кнопку неактивной, вам просто нужно отключить ее. Итак, вам нужно передать идентификатор элемента, как показано здесь.

Затем вы просто определяете метод, используя функцию .disabled на кнопке.

У меня всего одна кнопка отключается при нажатии и функция у меня все равно работает. Ваше редактирование все еще будет работать?

Когда вы передаете идентификатор кнопки с помощью this.id и отключаете его, это делает только одну кнопку неактивной, а две другие по-прежнему будут активны.

Я считаю, что вам нужен CSS для того, что я пытаюсь сделать. Я пытаюсь сделать так, чтобы кнопка была нажата, но когда вы нажимаете ее один раз, кнопка меняет цвет, и ее нельзя щелкнуть снова. Код работает, просто при нажатии одной кнопки все кнопки меняют цвет и не могут быть нажаты вместо одной кнопки, которая была нажата.

В CSS есть определенное состояние ссылки, которое я не использую очень часто. По крайней мере, я не использовал его часто до этого, но сейчас я понимаю, что оно может пригодиться. Я говорю о состоянии ссылки "active".

Это состояние начинает работать, когда Вы нажимаете на ссылку. То есть, после нажатия оно активируется. Мы все пользуемся состояниями "hover" или "visited", а состояние "active" может быть полезным, когда мы имеем дело со стилизоваными кнопками.

В Вашей операционной системе кнопки отвечают Вам когда Вы на них нажимаете. Они визуально становятся нажатыми, информируя Вас о том, что Вы успешно справились с этой задачей. Это делает любое приложение более отзывчивым и более привлекательным с точки юзабилити.

В Интернете такое встречается очень редко. Вы просто нажимаете на кнопку, и ничего не происходит. Конечно в некотрых браузерах есть некоторые подобные свойства при отображении страниц, но это все равно не то. Даже кнопки, которые благодаря фоновому рисунку выглядят выпуклыми, при нажатии на них никак не реагируют. Они остаются статическими и неотзывчивыми.

Так быть не должно. Просто используйте состоянием "active" для придания Вашим кнопкам "нажатого" или любого другого вида. Это выделит Ваш сайт или скрипт из общей массы, так как пользователям это будет напоминать их операционную систему.

Хватит болтать, давайте приступим к делу.

Допустим у нас есть кнопка, которая использует рисунок. Разметка будет выглядить так:

Добавим стилей. Наш CSS будет выглядеть так:

Мы превращаем ссылку в блок, придавая ему высоту и ширину и задавая фоновое изображение. Кнопка будет выглядеть так:

Теперь нам необходимо прописать состояние "active":

Из-за того, что моя картинка отображает два состояния, нам необходимо только сместить фоновый рисунок вниз, что и придаст ей вот такой вид:

Здесь находится картинка, о которой я говорю. А вот здесь демо (в Internet Explorer работать не будет - тут находится возможное решение проблемы).

После нажатия кнопки я хочу, чтобы она оставалась с активным стилем, а не возвращалась к обычному стилю. Можно ли это сделать с помощью CSS, пожалуйста? Я использую кнопку Blur из DIVI Theme (WordPress). Пожалуйста, помогите мне!

:active обозначает состояние взаимодействия (поэтому кнопка будет применяться во время нажатия), :focus может быть лучшим выбором здесь. Однако стиль будет потерян, как только другой элемент получит фокус.

Последняя потенциальная альтернатива с использованием CSS будет состоять в использовании :target , при условии, что при нажатии элементов устанавливаются маршруты (например, якоря) в пределах страница - однако это может быть прервано, если вы используете маршрутизацию (например, Angular), однако здесь это не так.

Javascript /jQuery

Таким образом, в CSS не существует способа абсолютно переключать стилизованное состояние - если ни одно из вышеперечисленного не работает для вас, вам нужно будет либо объединить его с изменением HTML (например, на основе на флажок) или программно применить /удалить класс, используя, например, JQuery

Вы сможете добавить этот код:

Тогда вы сможете украсить свой класс тем, что вам нужно.

Я выяснил это. ПРОСТО, ЭФФЕКТИВНО НЕТ jQUERY

Чтобы сделать сам контент кликабельным:

HTML

CSS

Чтобы кнопка изменила содержимое:

HTML

CSS

Надеюсь, это поможет !!

Несмотря на то, что этот вопрос задавался довольно давно, я хочу оставить свой собственный ответ по моему делу, потому что интерфейс быстро развивается. Я строю приложение в Vuejs, и мне нужно было активную класс по нажатию кнопки. У меня есть 3 кнопки и 2 варианта выбора. Когда нажата одна из трех кнопок в начале, она активна. Но когда вы нажимаете на опцию выбора, она исчезает. Кроме того, мне нужно, чтобы кнопка All была активной, когда шаблон смонтирован (скомпилирован).

Вот что я сделал, используя ответы выше и в Интернете. Я добавил классы btn--week , btn--month и btn--all соответственно.

В моих методах вариант сценария vuejs:

и в смонтированном жизненном цикле:

Я знаю, что это не идеальный стиль кода, но он работал для меня. Надеюсь, что это поможет кому-то еще в будущем.

Как сделать кнопку "Закрыть" и скрыть элемент со страницы

В статье рассмотрены очень простое и удобное решения того, как добавить к элементу на сайте надпись "Закрыть" или кнопку-крестик, которая дает возможность посетителю скрыть со страницы ненужный элемент или закрыть определенный блок, просто кликнув по ней.
Реализация потянет всего на несколько строк программного кода, так как сделать такой функционал на сайте или в блоге довольно легко при помощи 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);
>);
>);
>);

Алгоритм скрипта следующий: у всех указанных блоков, провести проверку на наличие в каждом элемента кнопки, если нет, то добавить, ничего не делать если присутствует. По клику на кнопку, скрыть ближайший блок с указанным селектором.

Читайте также: