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

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

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

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

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

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

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

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

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

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

Вы можете использовать этот 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>

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

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

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

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

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

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

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

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

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

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

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

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

HTML:

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

Javascript:

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

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

Ответ:

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

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

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

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

#example
{
  cursor:default;
}

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

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