Как отключить ссылку, используя только CSS?

Question

Есть ли способ отключить ссылку с помощью CSS?

У меня есть класс current-page, и я хочу, чтобы ссылки с этим классом были отключены, чтобы при их нажатии не происходило никаких действий.

Answer 1

Ответ уже есть в комментариях к вопросу. Для большей наглядности я копирую это решение здесь:

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}

<a href="link.html" class="not-active">Link</a>

Информацию о поддержке браузера см. В https://caniuse.com/#feat=pointer-events. Если вам нужна поддержка IE, существует обходной путь; см этот ответ .

Предупреждение. Использование pointer-events в CSS для элементов, не относящихся к SVG, является экспериментальным. Раньше эта функция была частью черновой спецификации пользовательского интерфейса CSS3, но из-за многих открытых проблем была отложена до CSS4.

Answer 2

.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}

<a href="#" class="disabled">link</a>

Answer 3

CSS можно использовать только для изменения стиля чего-либо. Лучшее, что вы могли бы сделать с чистым CSS - это вообще скрыть ссылку.

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

$('a.current-page').click(function() { return false; });

Answer 4

CSS не может этого сделать. CSS только для презентации. Ваши варианты:

• Не включайте атрибут href в теги <a>.
• Используйте JavaScript, чтобы найти элементы привязки с этим class и соответственно удалить их атрибуты href или onclick. jQuery поможет вам в этом (NickF показал, как сделать что-то похожее, но лучше).

Answer 5

Ссылка для начальной загрузки отключена

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

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

<button type="button" class="btn btn-link">Link</button>

Answer 6

Вы можете установить атрибут href на javascript:void(0)

.disabled {
  /* Disabled link style */
  color: black;
}

<a class="disabled" href="javascript:void(0)">LINK</a>

Answer 7

Если вы хотите, чтобы это был только CSS, логика отключения должна определяться CSS.

Чтобы переместить логику в определениях CSS, вам придется использовать селекторы атрибутов. Вот несколько примеров:

Отключить ссылку с точным href: =

Вы можете отключить ссылки, содержащие определенное значение href, например:

<a href="//website.com/exact/path">Exact path</a>

[href="//website.com/exact/path"]{
  pointer-events: none;
}

Отключить ссылку, содержащую фрагмент пути: *=

Здесь любая ссылка, содержащая /keyword/ в пути, будет отключена

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

Отключить ссылку, начинающуюся с: ^=

оператор [attribute^=value] предназначается для атрибута, который начинается с определенного значения. Позволяет отказаться от веб-сайтов и корневых путей.

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

Вы даже можете использовать его для отключения не-https ссылок. Например:

a:not([href^="https://"]){
  pointer-events: none;
}

Отключить ссылку, заканчивающуюся на: $=

Оператор [attribute$=value] предназначается для атрибута, который заканчивается определенным значением. Может быть полезно отказаться от расширений файлов.

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

или любой другой атрибут

Css может предназначаться для любого атрибута HTML. Может быть rel, target, data-custom и т. Д. *

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

Объединение селекторов атрибутов

Вы можете связать несколько правил. Допустим, вы хотите отключить все внешние ссылки, но не те, которые указывают на ваш сайт:

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

Или отключить ссылки на pdf-файлы определенного сайта:

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

Поддержка браузера

Селекторы атрибутов поддерживаются начиная с IE7. :not() селектор начиная с IE9.

Answer 8

Если вы хотите придерживаться формы HTML / CSS, другой вариант - использовать кнопку. Украсьте его и установите атрибут disabled.

например. http://jsfiddle.net/cFTxH/1/

Answer 9

Единственный способ, которым вы могли бы сделать это без CSS, - это установить CSS на оберточный div, который сделает вас исчезнувшим, и что-то еще займет его место.

EG:

<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah</span
</div>

С помощью CSS, подобного

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

Чтобы фактически отключить A, вам придется заменить его событие щелчка или ссылку, как описано другими.

PS: просто чтобы уточнитьЯ бы посчитал это довольно неопрятным решением, и для SEO это тоже не самое лучшее, но я считаю, что это лучшее с чисто CSS.

Answer 10

Попробуйте это:

<style>
.btn-disable {
    display:inline-block;
    pointer-events: none;       
}
</style>