Как сделать ссылку недоступной css
Как отключить ссылку, используя только CSS?
есть ли способ отключить ссылку с помощью CSS?
У меня есть класс с именем current-page и хотите, чтобы ссылки с этим классом были отключены, чтобы при их нажатии не происходило никаких действий.
20 ответов
ответ уже есть в комментариях на вопрос. Для большей видимости я копирую данное решение здесь:
для поддержки браузера, см. https://caniuse.com/#feat=pointer-events. Если вам нужна поддержка IE существует обходной путь; см. ответ.
предупреждение: pointer-events в CSS для не-SVG элементов является экспериментальным. Используемая функция быть частью спецификации проекта пользовательского интерфейса CSS3, но из-за многих открытых проблем было отложено до CSS4.
то, что вам действительно нужно, это javascript. Вот как вы будете делать то, что хотите, используя библиотеку jQuery.
CSS не может этого сделать. CSS предназначен только для презентации. Ваши варианты:
Bootstrap Отключена Ссылка
кнопка Bootstrap отключена, но она выглядит как link
вы можете установить до javascript:void(0)
чтобы фактически отключить A, вам придется заменить его событие click или href, как описано другими.
PS: просто чтобы уточнить, я бы счел это довольно неопрятным решением, и для SEO это тоже не самое лучшее, но я считаю, что это лучшее с чисто на CSS.
если вы хотите, чтобы это был только CSS, логика отключения должна быть определена CSS.
чтобы переместить логику в определениях CSS, вам придется использовать селекторы атрибутов. Вот несколько примеров :
отключить ссылку, которая имеет точный href: =
вы можете отключить ссылки, содержащие определенное значение href, например:
отключить ссылку, содержащую фрагмент пути: *=
здесь любой ссылке содержащий /keyword/ в пути будет отключена
отключить ссылку, которая начинается с: ^=
the [attribute^=value] оператор target атрибут, который начинается с определенного значения. Позволяет отбрасывать веб-сайты и корневые пути.
вы даже можете использовать его для отключения ссылок без https. Например :
на [attribute$=value] оператор target атрибут, который заканчивается конкретное значение. Может быть полезно отказаться от расширений файлов.
или любой другой атрибут
объединение селекторов атрибутов
вы можете связать несколько правил. Допустим, вы хотите отключить все внешние ссылки, но не те, которые указывают на ваш сайт :
или отключить ссылки на pdf-файлы конкретный веб-сайт :
поддержка браузеров
селекторы атрибутов поддерживаются начиная с IE7. :not() селектор с IE9.
на указатель-события свойство позволяет управлять элементами HTML реагируйте на события мыши / касания-включая CSS hover / active states, нажмите / коснитесь события в Javascript, и независимо от того, является ли курсор видимый.
Это не единственный способ вам отключить ссылку, но хороший способ CSS, который работает в IE10+ и всех новых браузерах:
Я искал через интернет и не нашел ничего лучше, чем этой. В основном, чтобы отключить функциональность нажатия кнопки, просто добавьте стиль CSS с помощью jQuery следующим образом:
затем, чтобы включить его снова, сделайте это
проверено на Firefox и IE 11, это сработало.
спасибо всем, кто разместил решения, я объединил несколько подходов, чтобы обеспечить некоторые более продвинутые disabled функциональность. вот суть, и код ниже.
Как сделать HTML ссылку некликабельной (неактивной)?
Пример CSS кода для создания некликабельной (неактивной) HTML ссылки. Добавляем в CSS код такую запись с классом:
В HTML коде устанавливаем для нективных ссылок класс disabled
Комментировать
СПАСИБО)) простой вариант решения)))
И зачем такие заморочки, если можно просто прописать ссылку, не добавляя
Есть 2 важных преимущества:
Очень быстро нашел нужную информацию, большое спасибо.
Небольшая поправочка, команда pointer-events: none ; подойдёт на блокировки клика по JavaScript’ам с некоторых сайтов, при клике на скрипт идёт пересылка на сайт.
Это решение не будет работать в IE.
Для IE есть следующий метод, он немного хардкодный но работает) Ссылку можно обернуть в span и перекрыть кликабельность ссылки псевдоэлементом на span.
Спасибо! Интересный вариант решения проблемы для IE.
При работе на теме лаерс вордпресс есть возможность управлять CSS но нет возможности править HTML. Есть способ для ИЕ с помощью только CSS?
Спасибо! Лаконично и эффективно.
Подскажите, если в документе 3 ссылки. И надо, чтобы при нажатии на одну из них, остальные исчезали (именно ссылки исчезали, а не содержимое, которое внутри ссылок).
Т.е., есть раскрывающийся доп.текст при нажатии на фразы «да», «нет», «не знаю». Надо чтобы при нажатии допустим на «да», фразы «нет» и «не знаю» пропадали.
Программирую на уровне копипастера) вбил запрос в поисковик, нашел это решение и стал счастливее) Спасибо!
Как сделать блокировку ссылок
Дата публикации: 2017-12-04
От автора: недавно на работе была поднята тема того, как делается блокировка ссылок. В прошлом году каким-то образом к стилям наших шрифтов был добавлен якорь disabled, пока я этого не видел. Есть проблема: в HTML нет реального способа заблокировать тег a (с валидным атрибутом href). А зачем вообще это делать? Ссылки лежат в основе веба.
В какой-то момент я понял, что моим коллегам это не понравится, поэтому я начал думать, как реализовать блокировку ссылок. Понимая, что это потребует много времени, я хотел доказать, что затея не стоит тех усилий и кода, который придется поддерживать. Но я боялся, что если покажу, что это все-таки сделать можно, они проигнорируют все мои предупреждения и просто используют мой пример как доказательство того, что все в порядке. Меня это не потрясло, но я подумал, что вам может пригодиться мое исследование.
Просто не делайте этого
Заблокированная ссылка уже не ссылка, это текст. Вам нужно пересмотреть дизайн, если в нем есть заблокированные ссылки.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Надежный способ: удалите href
Если вы приняли решение игнорировать мои предупреждения и все еще хотите заблокировать ссылку, то лучший способ, который я знаю – удалите href атрибут.
Из спецификации Hyperlink: «Атрибут href в тегах a и area необязателен; когда атрибут отсутствует, эти элементы не создают гиперссылки.»
У MDN определение попроще: «Для создания плейсхолдер ссылки этот атрибут можно пропустить (в HTML5). Плейсхолдер ссылка похожа на обычную ссылку, но она никуда не ведет.»
Стандартный JS код вставки и удаления атрибута href: