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

Question

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

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

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

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

или мой единственный вариант просто не обернуть "ссылку на страницу" в тег привязки?

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

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

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

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

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

452 9

html css

9 ответов:

Comments

Ничего не найдено.

Diego Unanue · Accepted Answer · 2017-04-05 19:52:47

вы можете использовать этот 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>
но я предлагаю первый подход.

Karan K · Accepted Answer · 2014-05-28 04:28:22

это не слишком легко сделать с CSS, так как это не поведенческий язык (т. е. JavaScript), единственным простым способом было бы использовать событие OnClick JavaScript на вашем якоре и возвращать его как false, это, вероятно, самый короткий код, который вы могли бы использовать для этого:
<a href="page.html" onclick="return false">page link</a>

pown · Accepted Answer · 2013-10-11 13:15:38

да.. возможно используя css
<a class="disable-me" href="page.html">page link</a>

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

Paulpro · Accepted Answer · 2011-07-18 03:48:27

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

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

alex · Accepted Answer · 2011-07-18 03:27:08

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

вы могли бы использовать некоторые JavaScript.
document.links[0].onclick = function(event) {
   event.preventDefault();
};

pixelfreak · Accepted Answer · 2011-07-18 03:27:13

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

HTML:

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

Javascript:
$('#my-link').click(function(e)
{
    e.preventDefault();
});
преимуществом этого является четкое разделение между логикой и представлением. Если однажды вы решите, что эта ссылка будет делать что-то еще, вам не нужно возиться с разметкой, просто JS.

Doa · Accepted Answer · 2011-07-18 03:25:37

ответ:

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

John · Accepted Answer · 2013-07-24 16:02:24

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

Hollnder · Accepted Answer · 2015-05-10 02:16:59

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

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

(для этого примера я дал "p" идентификатор "example")
#example
{
  cursor:default;
}
теперь ваш курсор останется таким же, как и на всей странице.