Как применить стиль к элементу/блоку на который кликнули?

@Cdelphi78 · Регистрация: 21.02.2014

Студворк — интернет-сервис помощи студентам

@Andriy Krit · 28.02.2016, 22:39

Вопрос с каким-то подвохом?)

CSS
1
2
3
.myclass:active {
      background: #666;
}

Но этот способ работает непосредственно когда элемент нажат.

Другой вариант - JavaScript

HTML5
1
<button onclick="myFunction()">Click me</button>

В Функцию стиль прописывайте.

Добавлено через 6 минут
Ну а самый лучший способ (который мне удалось найти и который, по убеждению многих, таковым является) - приписать новый стиль по нажатию

HTML

HTML5
1
2
<div id="foo">hello world!</div>
<img src="zoom.png" id="image" />

CSS

CSS
1
2
3
4
5
.myClass {
    background-color: red;
    color: white;
    font-size: 44px;
}

Javascript (jQuery)

JavaScript
1
2
3
$('#image').click(function() {
    $('#foo').addClass('myClass');
});

Взято со Stack Overflow.

@Jewbacabra · 28.02.2016, 22:53

Сообщение от Andriy Krit

Другой вариант - JavaScript

можно css-only

HTML5
1
2
<input type="checkbox" id="click-handler">
<label for="click-handler"><div id="click-me"></div></label>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
label {
  display: inline-block;
}
#click-me {
  width: 200px;
  height: 200px;
  background: red;
}
#click-handler {
  display: none;
}
#click-handler:checked + label #click-me {
  background: blue;
}

https://jsfiddle.net/yzrrxvom/

@Andriy Krit · 28.02.2016, 22:57

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

@Cdelphi78 · 28.02.2016, 23:02 **[ТС]**

Andriy Krit, да я тоже думал так все просто, только я прописал :visited и почему то не работает я так понял visited работает когда прописан href="" что не совсем желательно.

Добавлено через 3 минуты
Jewbacabra,проще наверно с js сделать. не совсем понял, дело в том что у меня вот такая структура:

CSS
1
2
3
4
5
6
7
8
9
 <tr>
                              <td class="disabled"><a>28</a></td>
                              <td class="disabled"><a>29</a></td>
                              <td class="disabled"><a>30</a></td>
                              <td><a>1</a></td>
                              <td><a>2</a></td>
                              <td><a>3</a></td>
                              <td><a>4</a></td>
                          </tr>

@Jewbacabra · 28.02.2016, 23:28

Сообщение от Andriy Krit

Наблюдали какие-нибудь побочные эффекты?

Никаких. Табы с помощью такой штуки как-то делал. Недостаток тут в том, что приходится ид добавлять, чтобы for работал, label тоже не всегда к месту. Если их число становится слишком большим - то лучше скриптом делать.

Сообщение от Cdelphi78

проще наверно с js сделать

На клик добавлять определенный класс. И этому классу уже стили добавить

Добавлено через 4 минуты

Сообщение от Cdelphi78

только я прописал :visited и почему то не работает

по некоторым причинам работа с :visited довольно ограничена
https://developer.mozilla.org/... d_selector

@siyanie · 28.02.2016, 23:33

Jewbacabra, если хочу пункты меню сделать табами(без перезагрузки страницы), но нужно вместить фотогаллерею - тут только JS??

@Cdelphi78 · 29.02.2016, 09:26 **[ТС]**

Сообщение от Jewbacabra

по некоторым причинам работа с :visited довольно ограничена

но я меняю только background color у ссылки на visited и все равно не работает?

Добавлено через 2 часа 5 минут
что то не могу сообразить а как на js чтобы удалялся этот класс при клике на соседний элемент.

Добавлено через 6 часов 58 минут
Кто нибуть поможет?. Пробую через класс active не получается.

Добавлено через 40 минут
Сам нашел.

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

Как применить стиль к элементу/блоку на который кликнули?

Решение

Решение

@Cdelphi78 140 / 74 / 18 Регистрация: 21.02.2014 Сообщений: 3,444

	Как применить стиль к элементу/блоку на который кликнули? 28.02.2016, 21:45. Показов 2799. Ответов 7 Метки нет (Все метки) Как применить стиль к элементу/блоку на который кликнули? 0

@Andriy Krit 0 / 0 / 1 Регистрация: 28.02.2016 Сообщений: 15
	28.02.2016, 22:57
	Интересный способ, не знал о таком. Наблюдали какие-нибудь побочные эффекты? 0

@siyanie 13 / 13 / 7 Регистрация: 21.11.2015 Сообщений: 85
	28.02.2016, 23:33
	Jewbacabra, если хочу пункты меню сделать табами(без перезагрузки страницы), но нужно вместить фотогаллерею - тут только JS?? 0