Как сделать чтоб при нажатии цвет оставался?

Question

[Bart Simpson]

Приветствую, сделал табы с контентом но мне нужно чтоб при нажатии на BUTTON бекграунд кнопки горел пока пользователь не переключит на другую кнопку, как это реализовать ? А то у меня крашится
Код; https://codepen.io/IvaLu/pen/BamQaYW

Comments

[Ankhena]

Ну вы же класс кнопке дописываете. Ему и задавайте bg.

И, если что, кнопка это тег button, а не div.

[Bart Simpson]

В таком случае и контентная часть делается цветной

[Bart Simpson]

Ankhena, разобрался, благодарю

[Ankhena]

Ivan Lunin,
.tab-nav-item.active {фон}

Разумнее использовать модификаторы
tab-nav-item--active вместо просто active.
Чтобы не повышать специфичность.

[Bart Simpson]

Ankhena, вы мне когда-то объясняли что в некоторых случаях на картинку нужно вешать "role="presentation"". Но столкнулся с тем что валидатор подсвечивает это ошибкой.. Как быть?

[Ankhena]

Ivan Lunin, на картинку? Зачем?
На инлайн SVG может быть?

На картинки вешают aria-hidden="true", чтобы наоборот, скрыть их от читалок.

p.s я, конечно, могла сгоряча что-то не так сформулировать. Покажите, пожалуйста, о чем была речь?

[Bart Simpson]

Ankhena,

[Bart Simpson]

Ankhena, я тогда не верно понял..

[Ankhena]

Ivan Lunin, в том пассаже нет упоминания конкретно тега img, а есть обобщенная фраза картинки-украшения.

Почитайте самостоятельно и подробно, что на что вешать
Using_the_presentation_role
ARIA: img role
aria-hidden

И т.д.
Можно сначала Доступность

Только не творите подобное: role="figure" на <figure>.
Если что-то решается обычными тегами и атрибутами, то именно так и нужно поступать в первую очередь.

Answer 1

[wifftees]

Ты сделал весь функционал, просто неправильно в css прописал.
Допиши

.active {
  background-color: #009EFF;
}