Jak wyłączyć link używając tylko CSS?
Czy Jest jakiś sposób, aby wyłączyć link za pomocą CSS?
Mam klasę o nazwie current-page
i chcę, aby linki z tą klasą były wyłączone tak, aby żadna akcja nie wystąpiła po ich kliknięciu.
20 answers
Odpowiedź jest już w komentarzach do pytania. Dla większej widoczności kopiuję To rozwiązanie tutaj:
.not-active {
pointer-events: none;
cursor: default;
text-decoration: none;
color: black;
}
<a href="link.html" class="not-active">Link</a>
Aby zapoznać się z obsługą przeglądarki, Zobacz https://caniuse.com/#feat=pointer-events . Jeśli potrzebujesz wsparcia dla IE, istnieje obejście problemu; zobacz ta odpowiedź .
Ostrzeżenie: użycie pointer-events
W CSS dla elementów innych niż SVG jest eksperymentalny. Funkcja była kiedyś częścią projektu specyfikacji interfejsu CSS3, ale ze względu do wielu otwartych spraw, został przełożony na CSS4.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-15 14:36:07
.disabled {
pointer-events: none;
cursor: default;
opacity: 0.6;
}
<a href="#" class="disabled">link</a>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-15 14:36:31
CSS może być używany tylko do zmiany stylu czegoś. Najlepsze, co możesz zrobić z czystym CSS, to całkowicie ukryć link.
To, czego naprawdę potrzebujesz, to javascript. Oto jak możesz zrobić to, co chcesz, używając biblioteki jQuery.
$('a.current-page').click(function() { return false; });
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-01-19 05:01:27
CSS nie może tego zrobić. CSS służy tylko do prezentacji. Twoje opcje to:
- nie dołączaj atrybutu
href
do tagów<a>
. - Użyj JavaScript, aby znaleźć elementy zakotwiczenia z tym
class
i odpowiednio usunąć ich atrybutyhref
lubonclick
. jQuery Ci w tym pomoże(NickF pokazał, jak zrobić coś podobnego, ale lepszego).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-01-19 05:13:56
Bootstrap Disabled Link
<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>
Bootstrap wyłączony przycisk ale wygląda jak link
<button type="button" class="btn btn-link">Link</button>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-15 14:44:38
Możesz ustawić href
atrybut na javascript:void(0)
.disabled {
/* Disabled link style */
color: black;
}
<a class="disabled" href="javascript:void(0)">LINK</a>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-15 14:45:38
Jeśli chcesz trzymać się tylko HTML / CSS w formularzu, inną opcją jest użycie przycisku. Stylizuj go i ustaw atrybut disabled
.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-27 18:05:26
Jedynym sposobem, aby to zrobić bez CSS byłoby ustawić CSS na div zawijania, który sprawił, że Twój a zniknął i coś innego zajmuje jego miejsce.
EG:
<div class="disabled">
<a class="toggleLink" href="wherever">blah</a>
<span class="toggleLink">blah</span
</div>
Z CSS jak
.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }
Aby faktycznie wyłączyć A, musisz zastąpić to zdarzenie click lub href, zgodnie z opisem innych.
PS: dla jasności uznałbym to za dość niechlujne rozwiązanie, a dla SEO też nie jest najlepsze, ale uważam, że jest najlepsze z czysto CSS.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-15 14:46:21
Spróbuj tego:
<style>
.btn-disable {
display:inline-block;
pointer-events: none;
}
</style>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-26 05:05:15
Jeśli chcesz, aby był to tylko CSS, logika wyłączająca powinna być zdefiniowana przez CSS.
Aby przenieść logikę w definicjach CSS, musisz użyć selektorów atrybutów. Oto kilka przykładów:
Wyłącz link, który ma dokładny href: =
Możesz wyłączyć linki, które zawierają określoną wartość href, jak tak:
<a href="//website.com/exact/path">Exact path</a>
[href="//website.com/exact/path"]{
pointer-events: none;
}
Wyłącz łącze zawierające fragment ścieżki: *=
Tutaj każdy link zawierający /keyword/
w ścieżce będzie disabled
<a href="//website.com/keyword/in/path">Contains in path</a>
[href*="/keyword/"]{
pointer-events: none;
}
Wyłącz łącze zaczynające się od: ^=
Operator [attribute^=value]
kieruje atrybut rozpoczynający się od określonej wartości. Umożliwia usuwanie stron internetowych i ścieżek głównych.
<a href="//website.com/begins/with/path">Begins with path</a>
[href^="//website.com/begins/with"]{
pointer-events: none;
}
Można go nawet użyć do wyłączenia łączy innych niż https. Na przykład:
a:not([href^="https://"]){
pointer-events: none;
}
Wyłącz link, który kończy się na: $=
Operator [attribute$=value]
kieruje atrybut, który kończy się określoną wartością. Przydatne może być odrzucanie rozszerzeń plików.
<a href="/path/to/file.pdf">Link to pdf</a>
[href$=".pdf"]{
pointer-events: none;
}
Lub każdy inny atrybut
Css może kierować dowolny atrybut HTML. Może być rel
, target
, data-custom
i tak dalej...
<a href="#" target="_blank">Blank link</a>
[target=_blank]{
pointer-events: none;
}
Łączenie selektorów atrybutów
Możesz łączyć wiele reguł. Załóżmy, że chcesz wyłączyć każdy link zewnętrzny, ale nie te, które wskazują na Twoją stronę: {]}
a[href*="//"]:not([href*="my-website.com"]) {
pointer-events: none;
}
[19]} lub wyłączyć linki do plików pdf określonej strony internetowej:
<a href="//website.com/path/to/file.jpg">Link to image</a>
[href^="//website.com"][href$=".jpg"] {
color: red;
}
Obsługa przeglądarki
Selektory atrybutów są obsługiwane od IE7. :not()
selektor od IE9.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-18 20:13:29
Właściwość pointer-events pozwala kontrolować jak elementy HTML reaguj na zdarzenia myszki/dotyku – w tym Stany kursora CSS/aktywne, kliknij / stuknij zdarzenia w Javascript i czy kursor jest widoczne.
To nie jedyny sposób wyłączenia linku, ale dobry sposób CSS, który działa w IE10+ i wszystkich nowych przeglądarkach:
.current-page {
pointer-events: none;
color: grey;
}
<a href="#" class="current-page">This link is disabled</a>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-21 11:29:55
Przeszukałem internet i nie znalazłem nic lepszego niż to . Zasadniczo, aby wyłączyć funkcję klikania przycisków, po prostu dodaj styl CSS za pomocą jQuery w ten sposób:
$("#myLink").css({ 'pointer-events': 'none' });
Następnie włączyć go ponownie zrobić to
$("#myLink").css({ 'pointer-events': '' });
Sprawdzony na Firefoksie i IE 11, zadziałał.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-21 07:58:13
Dzięki wszystkim, którzy opublikowali rozwiązania, połączyłem wiele podejść, aby zapewnić bardziej zaawansowaną funkcjonalność disabled
. tutaj jest gist , A kod jest poniżej.
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()
Oto Klasa 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
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-16 20:53:25
Możesz użyć tego 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-15 07:28:24
Demo tutaj
Spróbuj tego
$('html').on('click', 'a.Link', function(event){
event.preventDefault();
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-09 12:40:07
Możesz również rozmiar innego elementu tak, aby zakrywał linki (używając prawego indeksu z): który "pożre" kliknięcia.
(odkryliśmy to przez przypadek, ponieważ mieliśmy problem z nagle nieaktywnymi linkami z powodu "responsywnego" projektu powodującego, że H2 je przykrywa, gdy okno przeglądarki miało rozmiar mobilny.)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-01 06:59:08
Użyłem:
.current-page a:hover {
pointer-events: none !important;
}
I nie wystarczyło; w niektórych przeglądarkach nadal wyświetlał link, migając.
Musiałem dodać:
.current-page a {
cursor: text !important;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-19 11:42:56
Można to zrobić w CSS
.disabled{
cursor:default;
pointer-events:none;
text-decoration:none;
color:black;
}
<a href="https://www.google.com" target="_blank" class="disabled">Google</a>
Patrz:
Należy pamiętać, że text-decoration: none;
i color: black;
nie są potrzebne, ale to sprawia, że link wygląda bardziej jak zwykły tekst.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-18 19:16:02
pointer-events:none
wyłączy link:
.disabled {
pointer-events:none;
}
<a href="#" class="disabled">link</a>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-20 06:11:51
<a href="#!">1) Link With Non-directed url</a><br><br>
<a href="#!" disabled >2) Link With with disable url</a><br><br>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-22 13:49:26