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

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

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

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

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

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

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

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

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

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

Ответ 1

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

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

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

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

Это делает ссылку не clickeable, а стиль курсора - стрелкой, а не рукой, поскольку ссылки имеют.

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

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

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

Ответ 2

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

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

Ответ 3

Да.. Возможно с помощью css

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

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

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

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

HTML:

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

JavaScript:

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

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

Ответ 7

Ответ:

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

Ответ 8

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

Ответ 9

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

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

(для этого примера я дал "p" идентификатор "example" )

#example
{
  cursor:default;
}

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