Click class in css

How to add css class on click

Instead do something like this This example will add an event listener to your UL element which will capture every clicked on list item within the list. Solution 1: Adding an event listener to every single list item is considered to be bad practice.

Applying a CSS class on click to a list item?

Adding an event listener to every single list item is considered to be bad practice. Instead you can use one click event to handle all your list items.

Instead do something like this

const songSelects = document.getElementById('set-1'); // This is your UL element function changeColor(e) < e.target.classList.add('song-selection'); >songSelects.addEventListener('click', changeColor); 

This example will add an event listener to your UL element which will capture every clicked on list item within the list. You can access the actual item that has been clicked on through the event object, specifically its target property. This will then add your class to the individual list item that was clicked.

This process is called event delgation and if you’d like, you can read more about it here https://javascript.info/event-delegation

More detail about why you should use event delgation rather than adding a listener to every item. https://ehsangazar.com/optimizing-javascript-event-listeners-for-performance-e28406ad406c

You need to use document.querySelectorAll to obtain all of the elements and then loop over them to add all the event listeners.

const songSelects = document.querySelectorAll('li'); function changeColor() < this.classList.add('song-selection') console.log(this) >songSelects.forEach(songSelect=>songSelect.addEventListener('click', changeColor)); 

EDIT: On second thought, Chris has a better answer. My method has us adding eventListeners to each li tag, which can be cumbersome in the long-run. His method has us add an eventListener to the common parent of the li tags. — Always humbled by the people in StackOverflow. 😀

You need to use document.querySelectorAll on your li tags to select all of your li tags.

Then you need to use forEach() on the array holding these li tags to loop over them and give them an eventListener . Once you’ve added an eventListener on each li tag, you can give them the changeColor function that you created.

However, we need to modify that function a bit. I used this.classList.add(«song-selection»); to target the selected li tag.

You can see my working code below. Hopefully it helps!

const songs = document.querySelectorAll("li"); songs.forEach((song) => < song.addEventListener("click", changeColor); >); function changeColor()

How to add class on click event in Aurelia?, using ref in a custom element. custom attributes. Include jQuery for using e.g. $(‘#myelement’).addClass().

Add Remove Active Class On Click

Also Watch This : Add Remove Active Class Based On URL Using Javascript only Video Url Duration: 6:14

How to add a css class on click to only the buttons that are clicked

I think your problem is that you are using one property, btnStatus , for all the buttons, that is why your are having that issue. You need a value for each button. You could do something like this.

const btnPropsCol1 = [ < status: false, src: '../../assets/images/button-icons/home-icon.png', label: 'Home'>, < status: false, src: '../../assets/images/button-icons/life-icon.png', label: 'Life'>, < status: false, src: '../../assets/images/button-icons/car-icon.png', label: 'Auto'>] wasClicked(i: number)

 
>  
 

I did it just for col1 , you should repeated for the other col.

let’s say you want 3 button on app.component.html and want to change button css when clicked on any one.

[1,2,3] is for 3 button can be any length as per requirement (wrote this was to simplify things). you can pass your URL as input as shown above

create a new component say btn

Hope this was helpful their might be few minor syntax mistakes.

How to add a class on click of anchor tag using jQuery?, How to add a class on click of anchor tag using jQuery? — To add a class on click of anchor tag using jQuery, use the addClass() method.

Add css class on click in Angular 6

You can add setTimeout for delay to add add class

How to add a css class on click event in JavaScript?, You have the problem because e.addEventListener(‘click’, function(e) ) the e is event Object, you need to replace this :

AngularDart how to add and remove css class on click

You are setting openMenu to false every time clickBurger is called — just before your if block. Instead, set openMenu to false when you declare it in your class.

import 'dart:async'; import 'dart:html'; import 'package:angular/angular.dart'; import 'package:angular_components/angular_components.dart'; @Component( selector: 'my-app', templateUrl: 'app_component.html', styleUrls: ['app_component.css'], directives: [coreDirectives, MaterialIconComponent] ) class AppComponent < Element menuBtn; bool openMenu = false; // set to false here void clickBurger() < final menuBtn = document.querySelector('.nav-burger'); // openMenu = false; // remove this statement if (openMenu == false) < menuBtn.classes.add('open'); openMenu = true; >else if (openMenu == true) < menuBtn.classes.remove('open'); openMenu = false; >> > 

I’ll also mention a couple more things.

Unless you need to keep track of the state of the burger menu for other reasons, you can simplify your code considerably by using toggle instead of add and remove .

Also, you are declaring two different variables for menuBtn . One in the class scope and the other in your clickBurger function. I don’t think you intend to have both, and certainly you don’t need both.

After a bit of refactoring, it could look like this

// (import statements and component annotation) class AppComponent implements OnInit < void clickBurger() < document.querySelector('.nav-burger').classes.toggle('open'); >> 

Going one step further, we can break out the querySelector call to happen only once and store it in a member variable. We will need to use OnInit though to ensure the component has loaded before we search the DOM for the .nav-burger element.

// (import statements and component annotation) class AppComponent implements OnInit < Element menuBtn; @override void ngOnInit() < menuBtn = document.querySelector('.nav-burger'); >void clickBurger() => menuBtn.classes.toggle('open'); > 

Lastly, just for reference I will mention an alternative way to achieve this behavior is through class binding in your template. You might prefer to do it like we have done above above, or you may prefer class binding instead. You can read more about class binding in the docs: https://angulardart.dev/guide/template-syntax#class-binding

Add css class on click in Angular 6, You can add setTimeout for delay to add add class. Stackblitz Demo rotate(event)< event.srcElement.classList.remove("rotate");

Источник

Обработка события click средствами CSS

В течении нескольких последних лет наблюдается удивительная экспансия языков клиентской части веб приложений, особенно HTML5 и CSS3.

Теперь можно выполнять множество операций, которые раньше были немыслимы без применения JavaScript и изображений, например, скругленные углы, адаптивные шаблоны, модульные сетки, прозрачные цвета и многое другое.

Но всегда не хватало возможности обрабатывать событие click средствами CSS. Некоторые специалисты полагают, что такой опции не должно быть, так как интерактивное взаимодействие с пользователем является полем действия для JavaScript. Их доводы разумны, но использование JavaScript даже для простых нажатий утомительно.

В настоящее время нет официальных средств CSS для обработки события click. Но тем не менее, существуют способы, которые можно использовать для «обнаружения» нажатия с помощью только CSS без JavaScript.

Примечание

Описанные способы не предназначены для «реальной жизни». Материалы урока следует рассматривать как основу для экспериментов. Тем более что некоторые методы плохо поддерживаются в браузерах. Назначение урока — прикоснуться к границам возможностей CSS.

Используем чекбокс

Наверняка вы уже встречались с данным методом. Это самый популярный метод для обработки события click средствами CSS.

Метод основан на использовании чекбокса. Данный элемент имеет бинарную сущность и может быть только в одном из двух состояний. Поэтому данный метод является вполне надежным способом для обработки событий click в CSS.

 
Здесь будет красный цвет. Или уже есть.
 

.to-be-changed < color: black; >input[type=checkbox]:checked ~ .to-be-changed

Метод основан на использовании псевдо-класса :checked и селектора ~ . Обратите внимание, что он будет работать и с селектором + . Сущность метод заключается в том, что “если чекбокс отмечен, то следующие элементы с классом .to-be-changed будет красным”.

Чекбокс выглядит не очень привлекательно. Но вы можете сделать внешний вид более интересным скрыв чекбокс и привязав к нему метку. Как-то вот так:

 Нажми меня! 
Здесь будет красный цвет. Или уже есть.
 

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

input[type=checkbox] < position: absolute; top: -9999px; left: -9999px; >label < display: block; background: #08C; padding: 5px; border: 1px solid rgba(0,0,0,.1); border-radius: 2px; color: white; font-weight: bold; >input[type=checkbox]:checked ~ .to-be-changed

У нас получилась кнопка, нажатие на которую меняет цвет текста в параграфе. Повторное нажатие на кнопку меняет цвет обратно.

(Обратите внимание, что существуют различные методы для скрытия чекбокса. Очевидный — применение display:none .)

Плюсы

• Бинарный, есть только два состояния — отмечен или не отмечен
• Повторное нажатие приводит к восстановлению состояния (данный пункт может оказаться минусом)
• Позволяет организовать обработку связанных событий click (если первый чекбокс отмечен и второй чекбокс отмечен, то выполняем следующее действие)

Минусы

• Элементы должны иметь общего предка
• Требуется дополнительная разметка HTML (input, label и так далее)
• Требуется дополнительные действия для работы на мобильных браузерах

Способ с :target

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

Специальное событие для псевдо-класса :target зависит от “идентификатора фрагмента”. Если говорить просто, то данный псевдо-класс ссылается на хэштег, который располагается в конце URL, и становится активным, когда хэштег и ID совпадают.

Нажми меня! 
Здесь будет красный цвет. Или уже есть.
 

.to-be-changed < color: black; >.to-be-changed:target

При нажатии на ссылку ( href=»#id» ) изменяется URL и осуществляется переход по метке #id на странице. В данный момент элемент с идентификатором id может быть выделен с помощью псевдо-класса :target.

Плюсы

Минусы

• Мусор в истории браузера
• Происходит прокручивание страницы
• Требуется тег ссылки или операции с URL для включения хэштега
• Можно воздействовать только на один элемент (так как ID является уникальным)
• Нет способов возврата к исходному состоянию без использования другого хэштега, ссылки или операций с URL

Способ с :focus

Продолжим наш обзор способом с использованием другого псевдо-класса — :focus. Идея почти такая же, как и в предыдущем случае, за исключением того, что не предполагается изменения URL. Здесь мы полагаемся на фокус ввода на определенном элементе.

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

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

Нажми меня! 
Здесь будет красный цвет. Или уже есть.
 

Когда происходит нажатие на элементе спан, или переключение на него с помощью клавиши табуляции, он получает фокус ввода и соответствует псевдо-классу :focus. Селектор соседей делает остальную работу. Если по каким-то причинам использовать атрибут tabindex не требуется, то можно просто установить ссылку с адресом #.

Плюсы

Минусы

• Требуется либо элемент с фокусом, либо атрибут tabindex
• Соответствие возникает только при наличии фокуса ввода (нажатие где-нибудь в другом месте страницы смешивает алгоритм работы)

Способ с переходами

Вероятно, данный метод является самым «грязным» способом обработки события click в CSS.

Идея заключается в «хранении» стиля CSS в переходе CSS. Используем псевдо-бесконечную задержку, чтобы предотвратить возврат в исходное состояние. Звучит сложно, но в действительности очень просто в реализации.

Нажми меня! 
Здесь будет красный цвет. Или уже есть.
 

.to-be-changed < transition: all 0s 9999999s; >span:active ~ .to-be-changed

Задержка составляет примерно 116 дней. Не бесконечность, но некое ее подобие для наших условий. Поэтому изменения сохраняются и нет возврата к исходному состоянию.

Плюсы

Минусы

• Плохая поддержка в браузерах (нет в IE9 и Opera Mini)
• Работает только со значениями, которые можно использовать с переходами
• Нет способов возврата к исходному состоянию
• Нет реальной бесконечности ожидания (если ваш проект предполагает ожидание более 116 дней)

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: tympanus.net/codrops/2012/12/17/css-click-events/
Перевел: Сергей Фастунов
Урок создан: 18 Декабря 2012
Просмотров: 132607
Правила перепечатки

5 последних уроков рубрики «CSS»

• 

Забавные эффекты для букв

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Источник