Есть ли способ отключить ссылку с помощью CSS?
У меня есть класс под названием current-page
и хочу, чтобы ссылки с этим классом были отключены, чтобы при нажатии на них не выполнялось никаких действий.
Ответ уже в комментариях к вопросу. Для большей видимости я копирую это решение здесь:
<a href="link.html" class="not-active">Link</a>
.not-active {
pointer-events: none;
cursor: default;
}
Пример: http://jsfiddle.net/7EQJp
Для поддержки браузера см. http://caniuse.com/#search=pointer-events *, если вам нужно поддерживать IE, есть обходной путь, см. этот ответ.
Предупреждение. Использование pointer-events в CSS для элементов, отличных от SVG, является экспериментальным. Эта функция была частью спецификации CSS-интерфейса CSS3, но из-за многих открытых проблем была отложена до CSS4. *
CSS можно использовать только для изменения стиля чего-либо. Лучшее, что вы могли бы сделать с помощью чистого CSS, - это полностью скрыть ссылку.
Вам действительно нужен javascript. Вот как вы будете делать то, что хотите, используя библиотеку jQuery.
$('a.current-page').click(function() { return false; });
function(ev){ ev.preventDefault(); ev.stopPropagation(); return false;
,
.disabled {
pointer-events: none;
cursor: default;
opacity: 0.6;
}
<a href="#" class="disabled">link</a>
CSS не может этого сделать. CSS предназначен только для презентации. Ваши варианты:
href
в теги <a>
.class
и соответственно удалить их атрибуты href
или onclick
. jQuery поможет вам в этом (NickF показал, как сделать что-то подобное, но лучше). <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
<button type="button" class="btn btn-link">Link</button>
Вы можете установить атрибут href
на javascript:void(0)
<style>
.disabled{
/*Disabled link style*/
color:black;
}
</style>
<a class="disabled" href="javascript:void(0)">LINK</a>
Если вы хотите придерживаться только HTML/CSS в форме, другой вариант - использовать кнопку. Стиль его и установите атрибут disabled
.
например. http://jsfiddle.net/cFTxH/1/
Только так, как вы могли бы сделать это без CSS, было бы установить CSS на обертке div, который заставил бы вас исчезнуть и что-то еще заняло бы место.
EG:
<div class="disabled">
<a class="toggleLink" href="wherever">blah</a>
<span class="toggleLink">blah</span
</div>
С CSS как
.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }
Чтобы фактически отключить A, вам нужно будет заменить его событие click или href, как описано другими.
PS: Просто уточнить, я бы счел это довольно неопрятным решением, а для SEO это тоже не самое лучшее, но я считаю, что это лучше всего с чисто CSS.
Свойство указатель-события позволяет контролировать, как элементы HTML реагировать на события мыши/касания - включая наведение/активные состояния CSS, нажмите/коснитесь событий в Javascript, и будет ли курсор видны.
Этот не единственный способ, которым вы отключили ссылку, но хороший способ CSS, который работает в IE10 + и всех новых браузерах:
.current-page {
pointer-events: none;
color: grey;
}
<a href="#" class="current-page">This link is disabled</a>
Попробуйте следующее:
<style>
.btn-disable {
display:inline-block;
pointer-events: none;
}
</style>
Я искал через Интернет и нашел не лучше this. В основном, чтобы отключить функциональность нажатия кнопок, просто добавьте стиль CSS, используя jQuery, например:
$("#myLink").css({ 'pointer-events': 'none' });
Затем, чтобы снова включить его, выполните
$("#myLink").css({ 'pointer-events': '' });
Проверено на Firefox и IE 11, это сработало.
Если вы хотите, чтобы это был только CSS, логика отключения должна определяться CSS.
Чтобы переместить логику в определениях CSS, вам придется использовать селектора атрибутов. Вот несколько примеров:
=
Вы можете отключить ссылки, которые содержат определенное значение href, например:
<a href="//website.com/exact/path">Exact path</a>
[href="//website.com/exact/path"]{
pointer-events: none;
}
*=
Здесь любая ссылка, содержащая /keyword/
в пути, будет отключена
<a href="//website.com/keyword/in/path">Contains in path</a>
[href*="/keyword/"]{
pointer-events: none;
}
^=
Оператор [attribute^=value]
нацелен на атрибут, начинающийся с определенного значения. Позволяет отбрасывать веб-сайты и корневые пути.
<a href="//website.com/begins/with/path">Begins with path</a>
[href^="//website.com/begins/with"]{
pointer-events: none;
}
Вы можете даже использовать его для отключения ссылок, отличных от https. Например:
a:not([href^="https://"]){
pointer-events: none;
}
$=
Оператор [attribute$=value]
нацелен на атрибут, который заканчивается определенным значением. Может быть полезно отменить расширения файлов.
<a href="/path/to/file.pdf">Link to pdf</a>
[href$=".pdf"]{
pointer-events: none;
}
Css может настраивать любой атрибут html. Может быть rel
, target
, data-custom
и так далее...
<a href="#" target="_blank">Blank link</a>
[target=_blank]{
pointer-events: none;
}
Вы можете связать несколько правил. Скажем, что вы хотите отключить любую внешнюю ссылку, но не те, которые указывают на ваш сайт:
a[href*="//"]:not([href*="my-website.com"]) {
pointer-events: none;
}
Или отключить ссылки на pdf файлы определенного веб-сайта:
<a href="//website.com/path/to/file.jpg">Link to image</a>
[href^="//website.com"][href$=".jpg"] {
color: red;
}
Селектора атрибутов поддерживаются с IE7. :not()
селектор с IE9.
Благодаря всем, кто разместил решения, я объединил несколько подходов для обеспечения более продвинутых функциональных возможностей disabled
. Вот суть, и код ниже.
This provides for multiple levels of defense so that Anchors marked as disable actually behave as such.
Using this approach, you get an anchor that you cannot:
- click
- tab to and hit return
- tabbing to it will move focus to the next focusable element
- it is aware if the anchor is subsequently enabled
1. Include this css, as it is the first line of defense. This assumes the selector you use is 'a.disabled'
a.disabled {
pointer-events: none;
cursor: default;
}
2. Next, instantiate this class such as (with optional selector):
$ ->
new AnchorDisabler()
Вот класс coffescript:
class AnchorDisabler
constructor: (selector = 'a.disabled') ->
$(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)
isStillDisabled: (ev) =>
### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
target = $(ev.target)
return true if target.hasClass('disabled')
return true if target.attr('disabled') is 'disabled'
return false
onFocus: (ev) =>
### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
return unless @isStillDisabled(ev)
focusables = $(':focusable')
return unless focusables
current = focusables.index(ev.target)
next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))
next.focus() if next
onClick: (ev) =>
# disabled could be dynamically removed
return unless @isStillDisabled(ev)
ev.preventDefault()
return false
onKeyup: (ev) =>
# 13 is the js key code for Enter, we are only interested in disabling that so get out fast
code = ev.keyCode or ev.which
return unless code is 13
# disabled could be dynamically removed
return unless @isStillDisabled(ev)
ev.preventDefault()
return false
CSS
не JS
или о чем-то еще!
вы можете использовать этот css:
a.button,button {
display: inline-block;
padding: 6px 15px;
margin: 5px;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 4px;
-moz-box-shadow: inset 0 3px 20px 0 #cdcdcd;
-webkit-box-shadow: inset 0 3px 20px 0 #cdcdcd;
box-shadow: inset 0 3px 20px 0 #cdcdcd;
}
a[disabled].button,button[disabled] {
cursor: not-allowed;
opacity: 0.4;
pointer-events: none;
-webkit-touch-callout: none;
}
a.button:active:not([disabled]),button:active:not([disabled]) {
background-color: transparent !important;
color: #2a2a2a !important;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
}
<button disabled="disabled">disabled!</button>
<button>click me!</button>
<a href="http://royansoft.com" disabled="disabled" class="button">test</a>
<a href="http://royansoft.com" class="button">test2</a>
Демо здесь
Попробуйте это
$('html').on('click', 'a.Link', function(event){
event.preventDefault();
});
Вы также можете изменить размер другого элемента, чтобы он покрывал ссылки (используя правый индекс z): это "съест" клики.
(Мы обнаружили это случайно, потому что у нас возникла проблема с внезапно неактивными ссылками из-за "отзывчивого" дизайна, заставляя H2 покрывать их, когда окно браузера было мобильным.)
просто примените отображение none к элементу
.disabled {
display:none;
}
<a href="#" class="disabled">link</a>
<a onclick="return false" href="https://www.google.co.in/" />Google</a>
Используя return false в событии onclick внутри тега привязки, вы можете отключить функцию щелчка без использования CSS.
hidden
атрибута, применимого к любому элементу HTML. Затем можно использовать CSS, чтобы выбрать, например,a[hidden]
якорь и соответствующим образом оформить его.