Сделать ссылку неактивной с помощью CSS: подробное решение
Свойство pointer-events: none; выключает взаимодействие с ссылкой, а cursor: default; заменяет курсор на стандартный курсор-стрелку, чтобы показать, что ссылка неактивна.
Разбираемся в изменении стилей ссылок
Проработка внешнего вида
Чтобы полностью удалить все признаки активности ссылки, добавьте стили:
Скопировать код
a.no-click < color: currentColor; /* Цвет текста соответствует основному */ text-decoration: none; /* Без подчёркивания */ >Использование наложения: защита слоями
Без использования JavaScript вы можете перекрыть ссылку другим элементом с более высоким значением z-index :
Скопировать код
Скопировать код
.link-overlay < position: relative; z-index: 1; >.underneath-link
В этом случае ссылка будет видна, но клик по ней станет невозможным из-за перекрывающего ее div.
Юзабилити: не конфузим пользователя
Не забывайте, что ссылка, которая выглядит неактивной, может сбивать с толку пользователей. Обязательно давайте явные визуальные подсказки о ее состоянии.
Код для динамики контента и сложных случаев
Задача сохранения неактивности
В одностраничных приложениях или при динамической загрузке контента нужно последовательно использовать стили .no-click , чтобы поддерживать единообразие интерфейса.
Когда CSS взаимодействует с JavaScript
Несмотря на то что фокус данной статьи — CSS, напомним, что JavaScript или jQuery позволяют управлять взаимодействием со ссылками гораздо гибче:
Сделать ссылку неактивной с помощью CSS: подробное решение
Свойство pointer-events: none; выключает взаимодействие с ссылкой, а cursor: default; заменяет курсор на стандартный курсор-стрелку, чтобы показать, что ссылка неактивна.
Разбираемся в изменении стилей ссылок
Проработка внешнего вида
Чтобы полностью удалить все признаки активности ссылки, добавьте стили:
Скопировать код
a.no-click < color: currentColor; /* Цвет текста соответствует основному */ text-decoration: none; /* Без подчёркивания */ >Использование наложения: защита слоями
Без использования JavaScript вы можете перекрыть ссылку другим элементом с более высоким значением z-index :
Скопировать код
Скопировать код
.link-overlay < position: relative; z-index: 1; >.underneath-link
В этом случае ссылка будет видна, но клик по ней станет невозможным из-за перекрывающего ее div.
Юзабилити: не конфузим пользователя
Не забывайте, что ссылка, которая выглядит неактивной, может сбивать с толку пользователей. Обязательно давайте явные визуальные подсказки о ее состоянии.
Код для динамики контента и сложных случаев
Задача сохранения неактивности
В одностраничных приложениях или при динамической загрузке контента нужно последовательно использовать стили .no-click , чтобы поддерживать единообразие интерфейса.
Когда CSS взаимодействует с JavaScript
Несмотря на то что фокус данной статьи — CSS, напомним, что JavaScript или jQuery позволяют управлять взаимодействием со ссылками гораздо гибче:
Как сделать ссылку неактивной после нажатия?
Есть ссылка, при нажатии на которую нужно вывести блок информации и одновременно сделать ссылку неактивной (чтобы ее не было видно). Первый пункт я сделал, а сделать ссылку неактивной не выходит.
Подскажите как это сделать?
Отслеживать
6,488 6 6 золотых знаков 24 24 серебряных знака 31 31 бронзовый знак
задан 19 окт 2016 в 16:09
71 1 1 серебряный знак 5 5 бронзовых знаков
e.preventdefault() есть такая штука которая делает ссылку кликабельной, но не активной, или через сss pointer-events: none;/* делаем ссылку некликабельной */
19 окт 2016 в 16:11
Если я правильно вас понял, вам нужно задать оформление для ссылок псевдокласса :visited — htmlbook.ru/css/visited
Стиль для активной ссылки
Есть табы на чистом CSS, но как сделать чтоб первая ссылка была активной, имела собственный стиль, и при перекликованнии табов, ссылки тоже сватали активные. Пробую с :active , :focus но данный метод работает только во время нажатия на таб. С использованием Js это, конечно, легко сделать, но можно ли без JS?
.target:not(:target), :target ~ .target.default-target < display: none; >.target:target, .target.default-target < display: block; >a:active, a:focus
- Блок 1
- Блок 2
- Блок 3
- Блок 4
Отслеживать
7,157 4 4 золотых знака 29 29 серебряных знаков 56 56 бронзовых знаков
задан 8 янв 2017 в 18:16
845 1 1 золотой знак 8 8 серебряных знаков 27 27 бронзовых знаков
Вы знаете я недавно тщательно исследовал, я не увидел красивое, чистое решение на CSS.
8 янв 2017 в 19:34
прав @VadimOvchinnikov, вот тут есть примеры табов, некоторые становятся активными: css-tricks.com/examples/CSSTabs но честно говоря для динамической вёрстки они не подойдут, да и выглядят некрасиво в плане реализации
8 янв 2017 в 19:37
Еще думал место ссылок использовать input type radio + label + :checked, но данный подход тоже не красивый , так что пару строк js все таки придется использовать.
8 янв 2017 в 19:52
@Shperung, input type radio + label + :checked — не нужна не единая строка js
8 янв 2017 в 20:49
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
/* Очищаем форматирование общего блока, чтоб float не вилял на размещенные элементы после табов */ #tabs::after < display: block; content: ""; clear: both; >/* Предотвращаем прокрутку к tab-content при нажатии на ссылку */ .tab-switch < position: fixed; >.tab-link < display: inline-block; >/* Блок с содержимым изначально сокрытый и имеет параметр float:right для смещения под .tab-link. Если убрать float или заменить его на flex, .tab-link будет смещаться при переключении. Тут же указано наследование стиля при нажатии на ссылку, чтоб спрятать изначально активный блок. Если класс .active разместить в начале кода, то при нажатии на ссылку не будет срабатывать наследование между родственными селекторами, так как ссылка в коде будет после данного блока. */ .tab-content, .tab-switch:target ~ .tab-content.active < box-sizing: border-box; float: right; display: none; width: 100%; >/* Включаем сокрытый блок используя target и id прописанный в href */ .tab-switch:target + .tab-link + .tab-content, .tab-content.active < display: block; >#tabs < font-size: 0; >/* Описание стиля кнопок переключения табов и аналогичная работа с оформлением этих кнопок как в переключение скрытых блоков */ .tab-link, :target ~ .tab-link.active < margin-left: 0; margin-top: 10px; padding: 10px; background: transparent; text-decoration: none; font-size: 18px; color: #333; >.tab-link:hover < background-color: white; color: black; >.tab-switch:target + .tab-link, .tab-link.active < background-color: #eee; color: black; >/* Это просто внешний вид */ .tab-content < background-color: #eee; padding: 5px 15px; font-size: 13px; >.tab-content p < line-height: 1.65; >.tab-content ul, .tab-content ol < padding: 0 0 0 15px; margin: 0; line-height: 1.25; >.tab-content ul > li, .tab-content ol > li
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
Код красивый. Принцип тот же. Оформление допилите. Единственный минус — активный блок может быть только в конце из-за наследования класса к которому привязка идет для сокрытия начального блока. Можете попробовать поиграться с float-ом или со структурой в целом, думаю этот момент можно добить.
Для понимания основных принципов потребуется почитать про:
- Соседние селекторы
- Родственные селекторы
- Псевдокласс :target
- Другие стили