Войти Регистрация

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


a.disabled {
    pointer-events: none; /* делаем ссылку некликабельной */
    cursor: default;  /* устанавливаем курсор в виде стрелки */
    color: #999; /* цвет текста для нективной ссылки */
}

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


<a href="ссылка" class="disabled">Анкор ссылки</a>

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

captcha

  #1 / Гость
10 декабря 2014 / Ответить  

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

  #2 / codomaza
10 декабря 2014 / Ответить  

Пожалуйста! Стараемся :)

  #3 / Гость
04 февраля 2015 / Ответить  

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

  #4 / codomaza
04 февраля 2015 / Ответить  

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

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

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

  #6 / Гость
13 января 2016 / Ответить  

Благодарю!

  #7 / Гость
29 января 2016 / Ответить  

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

  #8 / Гость
09 марта 2016 / Ответить  

Спасибо.

  #9 / Гость
13 марта 2016 / Ответить  

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

  #10 / Гость
13 марта 2016 / Ответить  

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

HTML:

<span><a href ="#">link</a></span>

CSS:


span {
   display: block;
   position: relative;
}

span:before {
   content : ' ';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background: transparent;
   x-index: 9999;
}
  #11 / codomaza
13 марта 2016 / Ответить  

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

  #12 / Гость
04 апреля 2016 / Ответить  

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

  #13 / Гость
14 октября 2017 / Ответить  

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

  #14 / Гость
28 декабря 2017 / Ответить  

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

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

  #15 / Гость
18 апреля 2021 / Ответить  

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

Вход

Зарегистрируйтесь, если нет учетной записи

Восстановить пароль
Регистрация
Восстановить пароль
Войти в личный кабинет