Возможно ли сделать тэг привязки 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;
}
Теперь ваш курсор останется таким же, как на всей странице.