Css как заблокировать ссылку

Как отключить ссылку, используя только CSS?

Есть ли способ отключить ссылку с помощью CSS? У меня есть класс под названием current-page и хочу, чтобы ссылки с этим классом были отключены, чтобы при нажатии на них не выполнялось никаких действий.

после долгих поисков я получил идеальный ответ на этот вопрос css-tricks.com/pointer-events-current-nav

Должна ли ссылка использоваться или нет, имеет более семантическую, чем презентационная ценность. Его следует отключать не через CSS, а через использование hidden атрибута, применимого к любому элементу HTML. Затем можно использовать CSS, чтобы выбрать, например, a[hidden] якорь и соответствующим образом оформить его.

@amn, но я не думаю, что браузеры будут отображать элемент со скрытым атрибутом так стайлинг становится спорным.

@ user1794469 Они будут, если вы проинструктируете их, с помощью CSS, использовать display: block , например, или какое-либо другое значение для display . Но hidden не всегда применим — он относится к элементам, которые не имеют значения , и из вопроса неясно, почему ссылка должна быть отключена. Это, вероятно, случай проблемы XY.

18 ответов

Ответ уже в комментариях к вопросу. Для большей видимости я копирую это решение здесь:

Для поддержки браузера см. http://caniuse.com/#search=pointer-events *, если вам нужно поддерживать IE, есть обходной путь, см. этот ответ.

Предупреждение. Использование pointer-events в CSS для элементов, отличных от SVG, является экспериментальным. Эта функция была частью спецификации CSS-интерфейса CSS3, но из-за многих открытых проблем была отложена до CSS4. *

Вы всегда можете использовать polyfill для поддержки IE, мне часто нужны события указателя: не часто.

Если бы вы немного его стилизовали, чтобы пользователь мог видеть, что он отключен. Дайте ему некоторую непрозрачность: .2

Теперь это работает во всех современных браузерах, включая IE 11. Если вам нужна поддержка IE 10 и ниже, вы можете использовать JavaScript, такой как этот .

Важное примечание: при этом отключается только нажатие, а не сама ссылка. Вы все еще можете использовать Tab + Enter, чтобы «нажать» ссылку.

Использование pointer-events: none; не идеален Он также отключает другие события, такие как наведение, которое требуется для отображения title=»…» или всплывающих подсказок. Я обнаружил, что решение JS лучше (с использованием event.preventDefault(); ) вместе с некоторыми CSS ( cursor: default; opacity: 0.4; ) и всплывающей подсказкой, объясняющей, почему ссылка отключена.

Также стоит изменить цвет текста и подчеркнуть его, чтобы он больше не выглядел как ссылка: color:#000; text-decoration: none;

По крайней мере, в Chrome свойство «курсор» не имеет смысла при использовании «указатель-события: нет». AFAIK, это просто игнорируется. Попробуйте, например, установить «указатель-события: нет; курсор: не разрешен;», и курсор будет оставаться по умолчанию все время.

Любой способ изменить курсор, если я использую pointer-events: none; , Я пытаюсь использовать cursor: not-allowed; но это не работает.

Кроме того, это не предотвращает пузыри, поэтому, если у вас есть элемент под ним, он все еще срабатывает

Это именно то, что я искал: pointer-events: none; Это был отсутствующий мир в моей загадке. Большое спасибо.

CSS можно использовать только для изменения стиля чего-либо. Лучшее, что вы могли бы сделать с помощью чистого CSS, — это полностью скрыть ссылку.

Вам действительно нужен javascript. Вот как вы будете делать то, что хотите, используя библиотеку jQuery.

$('a.current-page').click(function() < return false; >); 

Не забывайте предотвращать поведение по умолчанию: function(ev)< ev.preventDefault(); ev.stopPropagation(); return false; ,

Также эта версия может использоваться для отключения щелчков при сохранении других событий указателя, таких как: hover или: focus! Топ ответ!

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

хорошая, но остерегайтесь поддержки браузера событий указателя (например,

Для стиля попробуйте изменить pointer-events:none; на pointer-events:unset; , Затем курсор можно изменить на cursor:not-allowed; , Это дает лучшее представление о том, что происходит с пользователем. Кажется, работает в FF, Edge, Chrome, Opera и Brave с сегодняшнего дня.

@Sablefoste Это не работает для меня в Chrome 60. Курсор действительно not-allowed , но ссылка остается активной.

CSS не может этого сделать. CSS предназначен только для презентации. Ваши варианты:

Отключенная ссылка Bootstrap

Кнопка отключения Bootstrap, но она выглядит как ссылка

Вы можете установить атрибут href на javascript:void(0)

@nickf true, однако, это изящное решение, и оно лучше, чем полагаться на плохой стиль IE по умолчанию, если он отключен.

Я думаю, что это может быть немного сложнее, чем это. Вот решение snook.ca/archives/javascript/clear_links_to_1

Если вы хотите придерживаться только HTML/CSS в форме, другой вариант — использовать кнопку. Стиль его и установите атрибут disabled .

Только так, как вы могли бы сделать это без CSS, было бы установить CSS на обертке div, который заставил бы вас исчезнуть и что-то еще заняло бы место.

.disabled a.toggleLink < display: none; >span.toggleLink < display: none; >.disabled span.toggleLink

Чтобы фактически отключить A, вам нужно будет заменить его событие click или href, как описано другими.

PS: Просто уточнить, я бы счел это довольно неопрятным решением, а для SEO это тоже не самое лучшее, но я считаю, что это лучше всего с чисто CSS.

Свойство указатель-события позволяет контролировать, как элементы HTML реагировать на события мыши/касания — включая наведение/активные состояния CSS, нажмите/коснитесь событий в Javascript, и будет ли курсор видны.

Этот не единственный способ, которым вы отключили ссылку, но хороший способ CSS, который работает в IE10 + и всех новых браузерах:

Я искал через Интернет и нашел не лучше this. В основном, чтобы отключить функциональность нажатия кнопок, просто добавьте стиль CSS, используя jQuery, например:

Затем, чтобы снова включить его, выполните

Проверено на Firefox и IE 11, это сработало.

Если вы хотите, чтобы это был только CSS, логика отключения должна определяться CSS.

Чтобы переместить логику в определениях CSS, вам придется использовать селектора атрибутов. Вот несколько примеров:

Отключить ссылку с точным href: =

Вы можете отключить ссылки, которые содержат определенное значение href, например:

Отключите ссылку, содержащую фрагмент пути: *=

Здесь любая ссылка, содержащая /keyword/ в пути, будет отключена

Отключите ссылку, которая начинается с: ^=

Оператор [attribute^=value] нацелен на атрибут, начинающийся с определенного значения. Позволяет отбрасывать веб-сайты и корневые пути.

Вы можете даже использовать его для отключения ссылок, отличных от https. Например:

Отключить ссылку, которая заканчивается на: $=

Оператор [attribute$=value] нацелен на атрибут, который заканчивается определенным значением. Может быть полезно отменить расширения файлов.

Или любой другой атрибут

Css может настраивать любой атрибут html. Может быть rel , target , data-custom и так далее.

Объединение селекторов атрибутов

Вы можете связать несколько правил. Скажем, что вы хотите отключить любую внешнюю ссылку, но не те, которые указывают на ваш сайт:

Или отключить ссылки на pdf файлы определенного веб-сайта:

Поддержка браузера

Селектора атрибутов поддерживаются с IE7. :not() селектор с IE9.

Благодаря всем, кто разместил решения, я объединил несколько подходов для обеспечения более продвинутых функциональных возможностей disabled . Вот суть, и код ниже.

This provides for multiple levels of defense so that Anchors marked as disable actually behave as such. Using this approach, you get an anchor that you cannot: - click - tab to and hit return - tabbing to it will move focus to the next focusable element - it is aware if the anchor is subsequently enabled 1. Include this css, as it is the first line of defense. This assumes the selector you use is 'a.disabled' a.disabled < pointer-events: none; cursor: default; >2. Next, instantiate this class such as (with optional selector): $ -> new AnchorDisabler() 

class AnchorDisabler constructor: (selector = 'a.disabled') -> $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus) isStillDisabled: (ev) => ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ### target = $(ev.target) return true if target.hasClass('disabled') return true if target.attr('disabled') is 'disabled' return false onFocus: (ev) => ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ### return unless @isStillDisabled(ev) focusables = $(':focusable') return unless focusables current = focusables.index(ev.target) next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0)) next.focus() if next onClick: (ev) => # disabled could be dynamically removed return unless @isStillDisabled(ev) ev.preventDefault() return false onKeyup: (ev) => # 13 is the js key code for Enter, we are only interested in disabling that so get out fast code = ev.keyCode or ev.which return unless code is 13 # disabled could be dynamically removed return unless @isStillDisabled(ev) ev.preventDefault() return false 

Источник

Как запретить переход по ссылке через css и js

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

Также бывает необходимо, чтобы при нажатии на ссылке срабатывал скрипт. В этом случае можно в href поставить #, но тогда при клике на ссылку страница проматывается вверх.

Запретить переход по ссылке можно с помощью css свойства или js скрипта.

css примеры блокировки переходы по ссылке.

Для этого используется свойство pointer-events: none, которое запрещает события указателя мыши для элементов с псевдоклассами active, click, hover. Особенность этого свойства в том, что если на эту ссылку назначено выполнение скрипта onclick, то он тоже не выполнится (пример, 2).

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

Запретить переход по ссылке через Java Script

Здесь имеется множество вариантов. Все они кроссбраузерные.

Бонус на заметку

Кстати, за счет pointer-events вы можете немного защитить картинку от копирования. Чаще всего пользователи нажимают правой кнопкой мыши по картинке и выбирают «Сохранить изображение». Но если сделать так:

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

Источник

Как сделать блокировку ссылок

От автора: недавно на работе была поднята тема того, как делается блокировка ссылок. В прошлом году каким-то образом к стилям наших шрифтов был добавлен якорь disabled, пока я этого не видел. Есть проблема: в HTML нет реального способа заблокировать тег a (с валидным атрибутом href). А зачем вообще это делать? Ссылки лежат в основе веба.

В какой-то момент я понял, что моим коллегам это не понравится, поэтому я начал думать, как реализовать блокировку ссылок. Понимая, что это потребует много времени, я хотел доказать, что затея не стоит тех усилий и кода, который придется поддерживать. Но я боялся, что если покажу, что это все-таки сделать можно, они проигнорируют все мои предупреждения и просто используют мой пример как доказательство того, что все в порядке. Меня это не потрясло, но я подумал, что вам может пригодиться мое исследование.

Просто не делайте этого

Заблокированная ссылка уже не ссылка, это текст. Вам нужно пересмотреть дизайн, если в нем есть заблокированные ссылки.

В BootStrap есть примеры применения класса .disabled к якорям, я их ненавижу. По крайней мере, они сказали, что этот класс всего лишь добавляет стиль disabled. Формулировка вводит в заблуждение. Чтобы реально отключить ссылку, недостаточно просто придать ей вид отключенной ссылки.

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

Надежный способ: удалите href

Если вы приняли решение игнорировать мои предупреждения и все еще хотите заблокировать ссылку, то лучший способ, который я знаю – удалите href атрибут.

Из спецификации Hyperlink: «Атрибут href в тегах a и area необязателен; когда атрибут отсутствует, эти элементы не создают гиперссылки.»

У MDN определение попроще: «Для создания плейсхолдер ссылки этот атрибут можно пропустить (в HTML5). Плейсхолдер ссылка похожа на обычную ссылку, но она никуда не ведет.»

Стандартный JS код вставки и удаления атрибута href:

Источник