Как сделать ссылку неактивной в html
Перейти к содержимому

Как сделать ссылку неактивной в html

  • автор:

Стилизация ссылок

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

Для изучения вам потребуется: Основы компьютерной грамотности, базовые знания HTML (изучите Введение в HTML), основы CSS (изучите Введение в CSS), базовые знания о текстах и шрифтах CSS.
Вы узнаете: Изучите как стилизуются ссылки и как использовать ссылки эффективно в общих задачах UI (пользовательских интерфейсах), например, в меню навигации.

Давайте посмотрим на некоторые ссылки

Мы рассматривали как реализуются ссылки в вашем HTML в соответствии с лучшими практиками в Создании гиперссылок. В этой статье мы будем опираться на эти знания, показывая вам лучшие практики по оформлению ссылок.

Состояния ссылок

Первое, что нужно понять, это концепция состояний ссылок — разные состояния в которых могут существовать ссылки, которые могут быть стилизованы используя различные псевдоклассы:

  • Link (не посещённая): Состояние по умолчанию, в котором находится ссылка, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс :link .
  • Visited: Ссылка, когда она уже была посещена (существует в истории браузера), стилизуется используя псевдокласс :visited .
  • Hover: Ссылка, когда на неё наведён курсор мыши, стилизуется используя псевдокласс :hover
  • Focus: Ссылка, когда она была сфокусирована (например когда пользователь переместился на неё используя клавишу Tab или наподобие или программно сфокусирована используя HTMLElement.focus() (en-US)) — стилизуется используя псевдокласс :focus .
  • Active: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс :active

Стили по умолчанию

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

Вы заметите несколько вещей при изучении стилей по умолчанию:

  • Ссылки подчёркнуты.
  • Не посещённые ссылки синие.
  • Посещённые ссылки фиолетовые
  • Наведение курсора мыши на ссылку меняют указатель мыши на иконку маленькой руки.
  • Сфокусированные ссылки имеют контур вокруг себя — вы можете сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на Mac, вам может понадобиться включить опцию Full Keyboard Access: All controls нажав Ctrl + F7 , прежде чем это будет работать).
  • Активные ссылки красные (попробуйте удерживать кнопку мыши на ссылке, когда вы кликните по ней).

Довольно интересно, что эти стили по умолчанию приблизительно такие же какими они были в первые дни браузеров в середине 1990-ых. Это потому, что пользователи знают и привыкли ожидать такого поведения — если бы ссылки были стилизованы по-разному, это бы путало много людей. Это не значит, что вы не должны стилизовать ссылки совсем, просто вы не должны уходить слишком далеко от ожидаемого поведения. По крайней мере вы должны:

  • Использовать нижнее подчёркивание для ссылок, но не для других вещей. Если вы не хотите подчёркивать ссылки, то хотя бы выделите их каким-либо другим путём.
  • Сделать так чтобы они как-нибудь реагировали на наведение/фокусировку на них и немного отличались после активации.

Стили по умолчанию могут быть выключены/изменены, используя следующие свойства CSS:

    для цвета текста. для стиля курсора мыши — вы не должны отключать эту опцию только если у вас нет на это веской причины. для контура текста (контур схож с границей, единственное отличие — это то, что границы занимают место в блоке, а контур — нет; он просто располагается поверх фона). Контур является полезным вспомогательным средством, так что подумайте хорошо, прежде чем отключать его; по крайней мере вы должны удвоить стили, заданные для состояния hover, а также состояния фокусировки.

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

Стилизация некоторых ссылок

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

Чтобы начать, мы выпишем наши пустые наборы правил:

Этот порядок важен так как стили ссылок опираются друг на друга, например стили в первом правиле будут применяться ко всем последующим правилам и когда ссылка будет активирована, она также будет находиться под «наведением» (hover). Если вы введёте их в неправильном порядке, стили не будут работать правильно. Чтобы запомнить этот порядок вы можете попробовать использовать мнемонику типа LoVe Fears HAte.

А теперь давайте добавим ещё немного информации чтобы правильно оформить этот стиль:

Также мы дадим некий пример HTML к которому применяется CSS:

Объединение этих двух даёт нам такой результат:

Итак, что мы сделали тут? Это определённо выглядит иначе чем стилизация по умолчанию, но все ещё даёт достаточно знакомый опыт для пользователей, чтобы знать, что происходит:

  • Первые два правила не так интересны в этом обсуждении.
  • Третье правило использует селектор a чтобы избавиться от подчёркивания текста и контура фокуса по умолчанию (которые всё равно варьируют в зависимости от браузера), а также добавляет малое количество padding к каждой ссылке — все это станет ясно позже.
  • Далее, мы используем селекторы a:link и a:visited чтобы настроить пару цветовых вариаций не посещённых и посещённых ссылок, так чтоб они отличались.
  • Следующие два правила используют a:focus и a:hover настраивают сфокусированные и наведённые (hovered) ссылки таким образом чтобы они имели разные фоновые цвета, плюс нижнее подчёркивание чтобы ссылка выделялась ещё больше. Два пункта на которые надо обратить внимание:
    • Нижнее подчёркивание создано используя border-bottom , а не text-decoration (en-US) — некоторые люди предпочитают это потому что первый имеет лучшие варианты стилизации, чем второй, и отрисован немного ниже, так что не срезает нижние элементы слов будучи подчёркнутыми (например хвосты у букв как «р» и «у»).
    • Значение border-bottom установлено на 1px solid , без определённого цвета. Это позволяет границам принимать тот же цвет что и элементы текста, что полезно в случае как этом, где текст имеет разные цвета в каждом случае.

    Активное изучение: Стилизуйте ссылки самостоятельно

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

    Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку Reset. Если вы действительно застряли нажмите кнопку Show solution чтобы вставить пример, который мы показали выше.

    Добавление иконок в ссылки

    Обычной практикой является добавление иконок в ссылки, чтобы предоставить больше индикатора того, на какой контент указывает ссылка. Давайте рассмотрим очень простой пример, который добавляет иконку к внешним ссылкам (ссылки, которые ведут на другие сайты). Такая ссылка обычно выглядит как маленькая стрела торчащая из коробочки — например, мы будем использовать этот отличный образец с сайта icons8.com.

    Давайте взглянем на HTML и CSS которые дадут нам эффект, который мы хотим. Во-первых, немного простого HTML который будет стилизован:

    Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали пользовательские маркеры для пунктов списка в последней статье — в этот раз, однако, мы используем короткую запись background вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем no-repeat чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.

    Также мы используем background-size для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придётся менять размер изображения и вставлять его как есть.

    Наконец, мы задаём некоторый padding-right для ссылки чтобы добавить пространство в котором появляется фоновое изображение, таким образом, чтобы мы не накладывали его на текст.

    И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои HTML ссылки правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст «http» таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи селектора атрибутов: a[href*=»http»] выбирает элементы <a> , но только если они имеют атрибут href со значением содержащим «http» где-то внутри него.

    Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!

    Примечание: Не переживайте если вы ещё не знакомы с фоном и адаптивным (отзывчивым) веб-дизайном (en-US) ; это объяснено в других местах

    Стилизация ссылок в виде кнопок

    Инструменты, которые вы исследовали в этой статье также могут быть использованы другим способом. Например, такие состояния как hover могут быть использованы для стилизации множества различных элементов, не только ссылок — вы можете захотеть стилизовать состояние hover параграфов, элементов списка или других вещей.

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

    Для начала HTML:

    А теперь наш CSS:

    Что даёт нам следующий результат:

    Давайте объясним, что тут происходит, фокусируясь на самых интересных частях:

    • Наше второе правило удаляет заданный по умолчанию padding у элемента <ul> и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае <body> ).
    • Элементы <li> по умолчанию в норме являются блочными (см. типы блоков CSS чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству display значение inline, что приводит к тому, что элементы списка располагаются в одной строке друг с другом — теперь они ведут себя как строчные элементы.
    • четвёртое правило — которое стилизует элемент <a> — самое сложное; давайте пройдёмся по нему шаг за шагом:
      • как в предыдущем примере, мы начинаем отключать настройки по умолчанию для text-decoration (en-US) и outline (en-US) — мы не хотим, чтоб они портили нам вид.
      • Далее мы устанавливаем display на inline-block — элементы <a> являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значением block , мы хотим иметь возможность менять их размер. inline-block позволяет нам делать это.
      • Теперь только изменение размера! Мы хотим заполнить всю ширину элемента <ul> , оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаём width на 19.5%, а margin-right на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет <ul> и выпадет вниз на следующую строку. Тем не менее, мы возвращаемся к 100%, используя следующее правило, которое выбирает только последний <a> в списке и удаляет его margin. Сделано!
      • Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаём line-height на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаём для текста чёрный цвет.

      Примечание: вы могли заметить что элементы списка в HTML все находятся на одной строке друг с другом — так сделано потому, что это сделано потому, что пробелы/разрывы строк между элементами встроенного блока создают пробелы на странице, точно также как пробелы между словами и такие пробелы могли бы нарушить расположение нашего горизонтального меню навигации. Вы можете найти больше информации об этой проблеме (и решения) на Fighting the space between inline block elements.

      Заключение

      Мы надеемся эта статья снабдила вас всем что вам надо знать о ссылках — на данный момент! Последняя статья в нашем модуле стилизации текста детализирует как использовать пользовательские шрифты на вашем веб-сайте или как они больше известны веб-шрифты.

      How to disable a link using only CSS

      I have a class called current-page and want links with this class to be disabled so that no action occurs when they are clicked.

      Peter Mortensen's user avatar

      25 Answers 25

      For browser support, please see https://caniuse.com/#feat=pointer-events. If you need to support Internet Explorer, there is a workaround; see this answer.

      Warning: The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS 3 UI draft specification but, due to many open issues, has been postponed to CSS 4.

      Vadim Ovchinnikov's user avatar

      Amir Keshavarz's user avatar

      CSS can only be used to change the style of something. The best you could probably do with pure CSS is to hide the link altogether.

      What you really need is some JavaScript code. Here’s how you’d do what you want using the jQuery library.

      Peter Mortensen's user avatar

      CSS can’t do that. CSS is for presentation only. Your options are:

      • Don’t include the href attribute in your <a> tags.
      • Use JavaScript, to find the anchor elements with that class , and remove their href or onclick attributes accordingly. jQuery would help you with that (NickF showed how to do something similar but better).

      Bootstrap Disabled Link

      Bootstrap Disabled Button but it looks like link

      Vadim Ovchinnikov's user avatar

      Jigar Bhatt's user avatar

      You can set the href attribute to javascript:void(0) :

      Peter Mortensen's user avatar

      Xinus's user avatar

      If you want it to be CSS only, the disabling logic should be defined by CSS.

      To move the logic in the CSS definitions, you’ll have to use attribute selectors. Here are some examples:

      Disable link that has an exact href: =

      You can choose to disable links that contain a specific href value like so:

      Disable a link that contains a piece of path: *=

      Here, any link containing /keyword/ in path will be disabled:

      Disable a link that begins with: ^=

      The [attribute^=value] operator targets an attribute that starts with a specific value. It allows you to discard websites and root paths.

      You can even use it to disable non-https links. For example:

      Disable a link that ends with: $=

      The [attribute$=value] operator targets an attribute that ends with a specific value. It can be useful to discard file extensions.

      Or any other attribute

      CSS can target any HTML attribute. Could be rel , target , data-custom and so on.

      Combining attribute selectors

      You can chain multiple rules. Let’s say that you want to disable every external link, but not those pointing to your website:

      Or disable links to pdf files of a specific website :

      Browser support

      Attributes selectors have been supported since Internet Explorer 7. And the :not() selector since Internet Explorer 9.

      Peter Mortensen's user avatar

      GuCier's user avatar

      And that was not enough; in some browsers it still displayed the link, blinking.

      Peter Mortensen's user avatar

      Pablo Molina's user avatar

      Apply the below class on HTML.

      Peter Mortensen's user avatar

      Viplav Soni's user avatar

      If you want to stick to just HTML/CSS on a form, another option is to use a button. Style it and set the disabled attribute.

      One way you could do this with CSS, would be to set a CSS on a wrapping div that you set to disappear and something else takes its place.

      With a CSS like

      To actually turn off the a , you’ll have to replace its click event or href , as described by others.

      PS: Just to clarify, I’d consider this a fairly untidy solution, and for SEO it’s not the best either, but I believe it’s the best with purely CSS.

      Peter Mortensen's user avatar

      Peter Mortensen's user avatar

      The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in JavaScript, and whether or not the cursor is visible.

      That’s not the only way you disable a link, but it is a good CSS way which work in Internet Explorer 10 (and later) and all new browsers:

      Peter Mortensen's user avatar

      Alireza's user avatar

      I searched the Internet and found no better than this. Basically, to disable button click functionality, just add CSS style using jQuery like so:

      Then to enable it again, do this

      It was checked on Firefox and Internet Explorer 11, and it worked.

      Peter Mortensen's user avatar

      Faisal Mq's user avatar

      You can use this CSS content:

      Peter Mortensen's user avatar

      I combined multiple approaches to provide some more advanced disabled functionality. Here is a gist, and the code is below.

      This provides for multiple levels of defense so that anchors marked as disable actually behave as such.

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

      Не понимаю, почему так редко попадается информация о том, как сделать ссылку некликабельной при том, что это вполне штатное действие.
      Для этого нужно прописать CSS-свойство pointer-events для ссылки напрямую, через класс или id:

      Ну и, соответственно, присваиваем ссылке класс .unclickable
      Пример: Ссылка

      Стоит заметить, что свойство pointer-events относится к спецификации CSS4, но в настоящий момент поддерживается многими браузерами за исключением IE ниже 11-ой версии и Opera Presto.

      2 комментария

      Зачем делать ссылку некликабельной?

      Но если уж действительно нужна… можно еще в js прописать:
      $(‘a’).on(‘click’, function(e) <
      e.preventDefault();
      // или так
      return false;
      >);
      или в самой ссылке
      текст

      в общем в самой ссылке так)
      a href=”линк” onclick=”return false;”

      Как отключить ссылки на текущей странице с помощью CSS

      Если хотите отключить ссылки на текущей странице, читайте эту статью и попробуйте примеры сами.

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

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

      Рассмотрим пример, где можно увидеть использование pointer-events . Здесь тег <a> отключен с помощью свойства cursor со значением «default»:

      Пример

      Как видите, несмотря на то, что он выглядит как ссылка, ничего не происходит при нажатии на него.

      В следующем примере свойства text-decoration и color применены к тегу ‘a’, и, таким образом, можно понять, что ссылка отключена:

      Пример

      Можно также отключить ссылку на текущей странице с помощью свойства user-select со значением none.

      Давайте рассмотрим пример, который показывает разницу между отключенной и активной ссылкой:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *