Чи можливо зробити тег HTML якоря не клікальним / пов’язаним за допомогою CSS?

Наприклад, якщо у мене це є:

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

Чи можу я скористатися атрибутом style, який зробить його таким чином, щоб посилання не було доступним для натискання і не переніме на сторінку.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), єдиним простим способом було б використання події OnClick JavaScript на вашому якорі та повернення його як хибне, це, мабуть, найкоротший код ви можете використовувати для цього:

<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, і це дуже просто. змінити "a" на "p". Ваше "посилання на сторінку" ні до чого не призводить, якщо ви хочете зробити це нетикувальним.

Коли ви скажете вашому css зробити курсор на цьому конкретному "p", скажіть це так:

(для цього прикладу я дав ідентифікатор "p" "приклад"

#example
{
  cursor:default;
}

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

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