Css как сделать ссылку некликабельной

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

Как сделать HTML ссылку некликабельной (неактивной)?

Пример CSS кода для создания некликабельной (неактивной) HTML ссылки. Добавляем в CSS код такую запись с классом:

В HTML коде устанавливаем для нективных ссылок класс disabled

Комментировать

СПАСИБО)) простой вариант решения)))

И зачем такие заморочки, если можно просто прописать ссылку, не добавляя

Есть 2 важных преимущества:

1. Стилизация неактивной ссылки. Вам всё равно придется использовать CSS стили для того, чтобы скрыть подсветку ссылки при наведении курсора.
2. Удобство для разработчика. Данный вариант удобен (необходим) при разработке веб-приложения, так так дает возможность задать стилизацию и быстро найти неактивные ссылки в коде.

Очень быстро нашел нужную информацию, большое спасибо.

Небольшая поправочка, команда pointer-events: none ; подойдёт на блокировки клика по JavaScript’ам с некоторых сайтов, при клике на скрипт идёт пересылка на сайт.

Это решение не будет работать в IE.

Для IE есть следующий метод, он немного хардкодный но работает) Ссылку можно обернуть в span и перекрыть кликабельность ссылки псевдоэлементом на span.

Спасибо! Интересный вариант решения проблемы для IE.

При работе на теме лаерс вордпресс есть возможность управлять CSS но нет возможности править HTML. Есть способ для ИЕ с помощью только CSS?

Спасибо! Лаконично и эффективно.

Подскажите, если в документе 3 ссылки. И надо, чтобы при нажатии на одну из них, остальные исчезали (именно ссылки исчезали, а не содержимое, которое внутри ссылок).

Т.е., есть раскрывающийся доп.текст при нажатии на фразы «да», «нет», «не знаю». Надо чтобы при нажатии допустим на «да», фразы «нет» и «не знаю» пропадали.

Программирую на уровне копипастера) вбил запрос в поисковик, нашел это решение и стал счастливее) Спасибо!

Источник

Как сделать ссылку некликабельной с помощью CSS

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

Использование CSS свойства pointer-events

Самый простой способ сделать ссылку некликабельной — это использование CSS свойства pointer-events. Данный способ позволяет отключить кликабельность элемента, но не удаляет ссылку. Вот пример кода:

Здесь мы создаем класс «disabled» для ссылки, которую хотим сделать некликабельной, и задаем ему свойство pointer-events со значением «none».

Использование CSS свойства text-decoration

Еще один способ сделать ссылку некликабельной — это убрать ее стандартное оформление. Для этого мы можем использовать CSS свойство text-decoration. Вот пример кода:

Здесь мы задаем класс «disabled» для ссылки и устанавливаем ему значение text-decoration: none, которое убирает подчеркивание ссылки. Мы также устанавливаем свойство cursor: default, чтобы курсор не менял свой вид при наведении на некликабельную ссылку.

Использование атрибута href

Еще один способ сделать ссылку некликабельной — это удалить ее атрибут href. Это приведет к тому, что при нажатии на ссылку ничего не произойдет. Вот пример кода:

Здесь мы добавляем класс «disabled» для ссылки и удаляем атрибут href, задав его значение «#». Это сделает ссылку некликабельной.

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

Источник

Как сделать ссылку неактивной, как отключить ссылку через ксс

Пример ссылки:

1. Сначала мы присваиваем класс нашей ссылке

.disaled_link /* делаем ссылку некликабельной */

3. При наведении на ссылку меняется внешний вид курсора. Для неактивной ссылки установим дефолтный курсор:

.disaled_link /* устанавливаем курсор в виде стрелки */

4. На этом шаге необходимо отключить изменение внешнего вида ссылки при наведении, например появление подчеркивания, изменение цвета, жирности и другие эффекты, используемые в вашем шаблоне.
Для изменения внешнего вида ссылки при наведении существует атрибут класса «hover»:

.disaled_link:hover
text-decoration:none; /*убираем подчеркивание*/
font-weight:normal;/*устанавливаем толщину шрифта*/

г. Новороссийск, ул. Дзержинского, д. 238
(Пожалуйста, позвоните перед приходом в офис)

© 2009-2023, создание сайтов Новороссийск, Москва, Анапа, Геленджик, Краснодар. Дизайн и разработка сайтов, создание сайтов в в Москве, Новороссийске. Создание одностраничников в Новороссийске. Создание Landing Page в Москве, Новороссийске.

Мы используем файлы cookie-файлы для наилучшего представления нашего сайта. Продолжая использовать этот сайт, вы соглашаетесь с использованием cookie-файлов.

Источник

Можно ли сделать внутри блока ссылки некликабельный элемент?

Код здесь
Нужно сделать, чтобы спаны с классами type-of-work__item-price и type-of-work__item-time были не кликабельны.
pointer-events: none;
не помогает.
Может быть есть еще идеи?

Евгений Эта поправка пришла позже, не хотелось менять структуру. К тому же кликабельным должно быть и изображение (Там картинки не подгрузились)

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

//Проверка на наличие подменю у левого меню. В случае нахождения добавляем "стрелку" для выпадающего меню $('.left-menu__list .left-menu__item').append( function(indx, val)< if($(this).find('.left-menu__list').length != 0) return '›'; else return ''; >); //Окончание секции "Проверка на наличие подменю у левого меню. В случае нахождения добавляем "стрелку" для выпадающего меню" //Раскрытие меню при нажатии на "стрелку" $('.arrow').click(function()< $(this).toggleClass('arrow-switch'); $(this).parents('.left-menu__item').find('.left-menu__list').toggleClass('left-menu__list--open'); >); //Окончание секции "Раскрытие меню при нажатии на "стрелку"

.left-menu__list < max-height: 0; -webkit-transition: 800ms ease all; transition: 800ms ease all; >.left-menu__list--open

Источник