Сделать ссылку неактивной css

Сделать ссылку неактивной css

Дата публикации: 2017-12-04

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

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

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

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

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

JavaScript. Быстрый старт

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

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

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

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

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

Читайте также:  Фотошоп убрать людей с заднего плана

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

…пост будет очень простой коротенький…

Сегодня изучать cms Вордпресс в связке с шаблоном становится всё более немодным! скачивают какие-то бесплатные темы, рихтуют под свои требования… и запускают скороспелые проекты в свет … а уж в процессе (по мере поступления) решают те или иные возникшие вопросы. Не знаю: правильно это, или не правильно — развивать проекты без определённых стартовых знаний… но как бы там ни было, и уж коли возникают вопросы, их следует решать.

Читайте также:  Форматирование флешки для видеорегистратора размер кластера

Нынче (как говорит моя практика) всё больше стараются делать информативные сайты, в том смысле что помещают куда-то в сайдбары достаточно много информации… и, экономя полезное место, комплектуют информацию посредством таб-виджетов, например.

Возникает вопрос: как сделать ссылку Таба неактивной: т.е чтобы при переходе по ссылкам — «открытый таб» (ссылка) становилась неактивной…

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

Иногда именно в такой постановке задают вопрос начинающие сайтовладельцы! А однажды — админ какого-то поварского сайта — попросила сделать ей для этих целей плагин.

Вряд ли стоит, решая такие простые вопросы, создавать (и звучит как-то смешно — создавать)) плагин…

показанный ниже вариант, скажем так, относится к визуальным! потому что работаем в данном случае с css , а не с php . (о решении php в следующий раз)

Решение достаточно просто! …потребуется всего-то только отыскать в активном шаблоне сайта файл стилей… style.css и не побояться немного поработать!

Итак: нужно отыскать класс css в который завёрнуты ссылки табов.

Как это сделать?

Открываем «консоль для разработчиков» F12 … далее наводим курсор на требуемое окошко (кнопку) таба и… смотрим имя требуемого нам класса.

Смотрите стили CSS именно того Таба который в данный момент активен (т.е на который кликнули/перешли)…

Смотрите внимательно что к чему; копируете имя селектора… затем — в шаблоне — в файле стилей (через поиск) отыскиваете требуемый…

Предположим (для примера), у нас будет такой селектор (а следовательно, класс): .tabs-widget-current — всё что нам нужно, так это добавить к этому классу свойство pointer-events:none — оно и сделает ссылку таба неактивной…

Возможно даже добавить для усиления важности свойства pointer-events:none — !important — это на тот случай, если используете дочернюю тему, либо какой-то сторонний плагин табов!…

Читайте также:  Время работы от аккумулятора ноутбука

Чтобы не засорять существующий в шаблоне класс стилей, советую организовать отдельный одноимённый селектор… (для некоторых случаев это целесообразнее)

В финале работ получится примерно так, если смотреть свойства CSS в панели разработчиков (в браузере).

Ключевая фраза в селекторе current — обычно отработка табов используется именно в этой css-html связке. Именно по этой примете и ищите!

И ещё: помните, в большинстве приличных шаблонов (или плагинов) используются какие-то визуальные эффекты активного/не активного ТАБА — изменение цвета текста ссылки, величины и пр. — то есть обрабатывающие неактивное состояние ссылки таба селекторы css нам в данном случае и нужны!

Подобно нынешнему варианту деактивируют ссылки меню и пр. (избавляются от циклических ссылок)

Но, в случае с меню, уже будем работать с файлом функций шаблона functions.php — это, как и говорил, в следующих статьях)

Как эпилог полезного:

…если что не ясно, пишите… задавайте вопросы в коммах…

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

Михаил ATs — владелец блога запросто с Вордпресс — в сети нтернет давным-давно.

. веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети. — заказы, вопросы. разработка.

Ссылка на основную публикацию
Сборка пк без корпуса
Если серьезно, то компьютер без корпуса работать может и даже будет, но это достаточно опасно, особенно когда вы плохо понимаете...
Ростелеком брянск личный кабинет вход
Наименование организации: ПАО «Ростелеком» Официальный сайт: rt.ru Вход в личный кабинет Ростелеком Вход в личный кабинет Ростелеком осуществляется по адресу:...
Ростелеком изменил лицевые счета
Когда вы решили стать абонентом компании Ростелеком, то с вами был заключен договор, в котором была указана информация, которая требуется...
Сборка пк на райзен 3 1200
Socket AM4, 4-ядерный, 3100 МГц, Turbo: 3400 МГц, Summit Ridge, Кэш L2 - 2048 Кб, Кэш L3 - 8192 Кб,...
Adblock detector