Можно ли с помощью CSS сделать тег привязки HTML недоступным для кликов / ссылок?


133

Например, если у меня есть это:

<a style="" href="page.html">page link</a>

Есть ли что-нибудь, что я могу использовать для атрибута стиля, который сделает ссылку недоступной для кликов и не приведет меня к page.html?

Или я могу просто не заключать ссылку на страницу в тег привязки?

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

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

Теперь я мог легко просто программно не оборачивать теги привязки вокруг выбранной ссылки. Но я полагаю, что будет более элегантно, если я всегда смогу обернуть выбранную ссылку примерно так:

<a id="current" href="link.html">link</a>

а затем позвольте разработчику управлять стилем связывания с помощью CSS.



3
Если вы не хотите, чтобы по нему щелкали, может, <span>вместо этого используйте?
Дэвид говорит, что нужно восстановить Монику

Я должен согласиться с Дэвидом. Не нарушайте парадигмы пользовательского интерфейса. Пользователь ожидает, что по ссылкам можно будет нажимать. Если по нему нельзя щелкнуть, значит, это не ссылка?
mrtsherman

Посетите stackoverflow.com/questions/2091168/disable-a-link-using-css для еще нескольких возможных ответов.
Оливер

Да, это ужасная идея. Программы чтения с экрана по-прежнему будут видеть ссылку как ссылку, потому что это ссылка. Поисковые системы тоже. Фактически, все, что понимает HTML. Не делай этого. В этом нет ничего "элегантного".
Пол Д. Уэйт,

Ответы:


270

Вы можете использовать этот CSS:

.inactiveLink {
   pointer-events: none;
   cursor: default;
}

А затем назначьте класс своему html-коду:

<a style="" href="page.html" class="inactiveLink">page link</a>

Это делает ссылку недоступной для кликов, а курсор - стрелкой, а не рукой, как у ссылок.

или используйте этот стиль в html:

<a style="pointer-events: none; cursor: default;" href="page.html">page link</a>

но я предлагаю первый подход.


Я могу подтвердить, что это работает в версии Firefox / Chrome для Ubuntu. Интересно, будет ли он работать в IE в Windows.
JohnMerlino

3
Ключевым в этом растворе: pointer-events. Вот ссылка на таблицу совместимости
masegaloeh 02

@JohnMerlino: не работает в IE9. См. Дополнительную информацию по ссылке masegaloeh на таблицу совместимости
Howie,

Предостережение: табуляция для перемещения фокуса на ссылку и использование Enter для активации ссылки по-прежнему будут работать
wtho

Не думаю, что курсор: нужен дефолт. Пока у вас есть события-указатели: нет, это работает.
kloddant

51

Это не так просто сделать с помощью CSS, поскольку это не поведенческий язык (например, JavaScript), единственный простой способ - использовать событие JavaScript OnClick для привязки и вернуть его как false, это, вероятно, самый короткий код. вы можете использовать для этого:

<a href="page.html" onclick="return false">page link</a>

2
@Mike Этот щелчок ничего не делает, но кнопка по-прежнему выглядит интерактивной.
acostache

1
@acostache с использованием style = "cursor: default;" должен помочь с указателем
Джон

4
Вопрос был: «используя CSS», так что это хороший, но не правильный ответ.
Роман Хольцнер

Лучше использовать css, чем onclick = "return false" по трем основным причинам: 1. С помощью css вы можете изменить курсор мыши ссылки по умолчанию на стрелку по умолчанию. 2- Это навязчивый js. 3- Это на самом деле возвращает значение, вы не хотите возвращать false каждый раз, когда нажимаете на ссылку.
Diego Unanue

11

Да .. Можно использовать css

<a class="disable-me" href="page.html">page link</a>

.disable-me {
    pointer-events: none;
}

Это самый чистый способ, но с одной оговоркой: он поддерживается только в IE11 + caniuse.com
pixelfreak

8

Или чисто HTML и CSS без событий:

<div style="z-index: 1; position: absolute;">
    <a style="visibility: hidden;">Page link</a>
</div>
<a href="page.html">Page link</a>

1
-1, потому что это довольно сложный / запутанный способ решения проблемы. Это также не совсем то, что задает вопрос (сделать ссылку неактивной). Он просто закрывает ссылку невидимым элементом. Ответ Диего намного чище.
разработка

@developering Я думаю, что ответ Диего тоже лучше, и его следует проголосовать выше и принять. Однако, когда я написал этот ответ (3 года назад) pointer-events, браузер почти не поддерживал.
Пол

@Paulpro Я как бы подумал, что это так. Приносим извинения за голос против! Просто хочу убедиться, что наверху всегда самый свежий ответ. Спасибо за ответ.
разработка

6

CSS был разработан, чтобы влиять на представление, а не на поведение.

Вы можете использовать JavaScript.

document.links[0].onclick = function(event) {
   event.preventDefault();
};

5

Более ненавязчивый способ (при условии, что вы используете jQuery):

HTML:

<a id="my-link" href="page.html">page link</a>

Javascript:

$('#my-link').click(function(e)
{
    e.preventDefault();
});

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


4
Вы знаете, что можете легко написать код, отличный от jQuery, чтобы делать то же самое, что работало бы немного быстрее: document.getElementById('my-link').onclick = function(){ return false; };
Пол

1
Я думаю, что большинство людей хотят (и должны) использовать какой-то фреймворк для облегчения разработки. Автор не указал никаких ограничений производительности, но размер jQuery minified и gzip составляет всего 31 КБ. Я думаю, что выгода намного превышает стоимость.
pixelfreak

2
Шутки в сторону? Какой браузер не поддерживает onclick или getElementById. Итак, IE 2 не поддерживает onclick, но он также не поддерживает CSS ... и я очень сомневаюсь, что ваш код jQuery будет работать и в IE 2.
Пол

1
Разница в скорости может быть небольшой, но нет, если вы не можете загрузить библиотеку jQuery. Я действительно не думаю, что использовать поощрение использования jQuery, когда он вам не нужен, является хорошей идеей, потому что люди становятся зависимыми от него и забывают, как писать Javascript без него.
Пол

4
@PaulPRO Это обсуждение спорно без требований автора. У каждого фреймворка есть свое предназначение. Если он плохо владеет JS и просто создает веб-сайт для мамы-н-попа и ему нужно манипулировать некоторым элементом DOM, ему будет намного проще использовать фреймворк. Ваше нежелание использовать какой-либо фреймворк просто смешно. PHP написан на C. Означает ли это, что вы должны писать C, а не использовать PHP? В iOS есть UIKit, Core Data, Quartz и т. д. Flash имеет множество часто используемых сторонних библиотек. Опять же, у каждой структуры есть свое предназначение. Пуристский, невосприимчивый менталитет никому не поможет.
pixelfreak


0

Это можно сделать в css, и это очень просто. измените «а» на «р». Ваша «ссылка на страницу» в любом случае никуда не ведет, если вы хотите сделать ее не кликабельной.

Когда вы говорите своему css выполнить действие при наведении курсора на этот конкретный "p", скажите ему следующее:

(для этого примера я дал "p" ID "примера")

#example
{
  cursor:default;
}

Теперь ваш курсор останется таким же, как и на всей странице.


-1
<a href="page.html" onclick="return false" style="cursor:default;">page link</a>

Для этого нет необходимости добавлять отдельный ответ, достаточно вашего комментария к ответу @KaranK, подумал. Пожалуйста, избегайте дублирования ответов.
МАЧитгарха
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.