Как сделать ссылку неактивной css
Как сделать HTML ссылку некликабельной (неактивной)?
Пример CSS кода для создания некликабельной (неактивной) HTML ссылки. Добавляем в CSS код такую запись с классом:
В HTML коде устанавливаем для нективных ссылок класс disabled
Комментировать
СПАСИБО)) простой вариант решения)))
И зачем такие заморочки, если можно просто прописать ссылку, не добавляя
Есть 2 важных преимущества:
Очень быстро нашел нужную информацию, большое спасибо.
Небольшая поправочка, команда pointer-events: none ; подойдёт на блокировки клика по JavaScript’ам с некоторых сайтов, при клике на скрипт идёт пересылка на сайт.
Это решение не будет работать в IE.
Для IE есть следующий метод, он немного хардкодный но работает) Ссылку можно обернуть в span и перекрыть кликабельность ссылки псевдоэлементом на span.
Спасибо! Интересный вариант решения проблемы для IE.
При работе на теме лаерс вордпресс есть возможность управлять CSS но нет возможности править HTML. Есть способ для ИЕ с помощью только CSS?
Спасибо! Лаконично и эффективно.
Подскажите, если в документе 3 ссылки. И надо, чтобы при нажатии на одну из них, остальные исчезали (именно ссылки исчезали, а не содержимое, которое внутри ссылок).
Т.е., есть раскрывающийся доп.текст при нажатии на фразы «да», «нет», «не знаю». Надо чтобы при нажатии допустим на «да», фразы «нет» и «не знаю» пропадали.
Программирую на уровне копипастера) вбил запрос в поисковик, нашел это решение и стал счастливее) Спасибо!
Как отключить ссылку, используя только 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 функциональность. вот суть, и код ниже.
Как сделать блокировку ссылок
Дата публикации: 2017-12-04
От автора: недавно на работе была поднята тема того, как делается блокировка ссылок. В прошлом году каким-то образом к стилям наших шрифтов был добавлен якорь disabled, пока я этого не видел. Есть проблема: в HTML нет реального способа заблокировать тег a (с валидным атрибутом href). А зачем вообще это делать? Ссылки лежат в основе веба.
В какой-то момент я понял, что моим коллегам это не понравится, поэтому я начал думать, как реализовать блокировку ссылок. Понимая, что это потребует много времени, я хотел доказать, что затея не стоит тех усилий и кода, который придется поддерживать. Но я боялся, что если покажу, что это все-таки сделать можно, они проигнорируют все мои предупреждения и просто используют мой пример как доказательство того, что все в порядке. Меня это не потрясло, но я подумал, что вам может пригодиться мое исследование.
Просто не делайте этого
Заблокированная ссылка уже не ссылка, это текст. Вам нужно пересмотреть дизайн, если в нем есть заблокированные ссылки.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Надежный способ: удалите href
Если вы приняли решение игнорировать мои предупреждения и все еще хотите заблокировать ссылку, то лучший способ, который я знаю – удалите href атрибут.
Из спецификации Hyperlink: «Атрибут href в тегах a и area необязателен; когда атрибут отсутствует, эти элементы не создают гиперссылки.»
У MDN определение попроще: «Для создания плейсхолдер ссылки этот атрибут можно пропустить (в HTML5). Плейсхолдер ссылка похожа на обычную ссылку, но она никуда не ведет.»
Стандартный JS код вставки и удаления атрибута href:
Как сделать открытую ссылку в Табе неактивной? (некликабельной)
…пост будет очень простой коротенький…
Сегодня изучать cms Вордпресс в связке с шаблоном становится всё более немодным! скачивают какие-то бесплатные темы, рихтуют под свои требования… и запускают скороспелые проекты в свет … а уж в процессе (по мере поступления) решают те или иные возникшие вопросы. Не знаю: правильно это, или не правильно — развивать проекты без определённых стартовых знаний… но как бы там ни было, и уж коли возникают вопросы, их следует решать.
Нынче (как говорит моя практика) всё больше стараются делать информативные сайты, в том смысле что помещают куда-то в сайдбары достаточно много информации… и, экономя полезное место, комплектуют информацию посредством таб-виджетов, например.
Возникает вопрос: как сделать ссылку Таба неактивной: т.е чтобы при переходе по ссылкам — «открытый таб» (ссылка) становилась неактивной…
Как сделать ссылку в открытом Табе неактивной
Иногда именно в такой постановке задают вопрос начинающие сайтовладельцы! А однажды — админ какого-то поварского сайта — попросила сделать ей для этих целей плагин.
Вряд ли стоит, решая такие простые вопросы, создавать (и звучит как-то смешно — создавать)) плагин…
Решение достаточно просто! …потребуется всего-то только отыскать в активном шаблоне сайта файл стилей… style.css и не побояться немного поработать!
Итак: нужно отыскать класс css в который завёрнуты ссылки табов.
Открываем «консоль для разработчиков» F12 … далее наводим курсор на требуемое окошко (кнопку) таба и… смотрим имя требуемого нам класса.
Смотрите стили CSS именно того Таба который в данный момент активен (т.е на который кликнули/перешли)…
Смотрите внимательно что к чему; копируете имя селектора… затем — в шаблоне — в файле стилей (через поиск) отыскиваете требуемый…
Чтобы не засорять существующий в шаблоне класс стилей, советую организовать отдельный одноимённый селектор… (для некоторых случаев это целесообразнее)
В финале работ получится примерно так, если смотреть свойства CSS в панели разработчиков (в браузере).
Ключевая фраза в селекторе current — обычно отработка табов используется именно в этой css-html связке. Именно по этой примете и ищите!
И ещё: помните, в большинстве приличных шаблонов (или плагинов) используются какие-то визуальные эффекты активного/не активного ТАБА — изменение цвета текста ссылки, величины и пр. — то есть обрабатывающие неактивное состояние ссылки таба селекторы css нам в данном случае и нужны!
Подобно нынешнему варианту деактивируют ссылки меню и пр. (избавляются от циклических ссылок)
Но, в случае с меню, уже будем работать с файлом функций шаблона functions.php — это, как и говорил, в следующих статьях)
Как эпилог полезного:
…если что не ясно, пишите… задавайте вопросы в коммах…
Online консультация по настройкам и созданию сайтов на WordPress
На этом занавес представления опускается…
…на рампы пыль печальная ложится…
Как сделать ссылку неактивной (некликабельной) средствами css?
Нюансы
Сделайте все ссылки в состоянии :hover красными и неподчеркнутыми, в состоянии :link — голубыми, в состоянии :visited — зелеными, в состоянии :active — черными.
Видео
Как сделать ссылку в HTML
Ссылка, которую мы сделали в визуальном редакторе на языке HTML будет выглядеть так:
Чтобы закрыть ссылку от индексации, нужно добавить еще один атрибут rel = “nofollow”. Можно вставить его как перед target = “_ blank”, так и после него. Это значения не имеет, как говорится, от перемены мест сумма не меняется. В итоге наша ссылка будет выглядеть так:
Атрибут rel = “nofollow” используют для того, чтобы не передавать вес страницы своего сайта сторонним ресурсам. Также в ссылках с rel = “nofollow» не будет учитываться анкор ссылки. Хотя робот google может перейти по нему. Некоторые эксперименты даже свидетельствуют о том, что ссылки закрыты в nofollow также могут повлиять на ранжирование сайта.
Информация о rel=”nofollow” справки google-
В принципе ничего сложного нет, но все же советую завести специальную папку на компьютере или еще лучше в google docs, и скопировать туда эту ссылку с атрибутами. Туда же можете заносить необходимые в работе образцы кодов, идентификаторы и т.д. Если что-то забудете, папка всегда под рукой, удобно плюс экономия времени.