Cum pentru a dezactiva un link folosind doar CSS?

Există vreo modalitate de a dezactiva un link folosind CSS?

Am o clasa numita curent-page` si vreau link-uri cu această clasă pentru a fi dezactivat, astfel încât nici o acțiune nu se produce atunci când se face clic pe ele.

Comentarii la întrebare (4)
Soluția

Răspunsul este deja în comentarii întrebarea. Pentru mai multă vizibilitate, sunt copierea această soluție aici:

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}
<a href="link.html" class="not-active">Link</a>

Pentru sprijin browser-ul, vă rugăm să consultați https://caniuse.com/#feat=pointer-events. Dacă aveți nevoie pentru a sprijini IE există o soluție; a se vedea acest răspuns.

Avertisment: utilizarea de pointer-evenimente în CSS pentru non-SVG elemente este experimental. Caracteristica folosit pentru a fi parte din CSS3 UI proiect de caietul de sarcini, dar, din cauza multe probleme deschise, a fost amânată pentru CSS4.

Comentarii (16)
.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}
<a href="#" class="disabled">link</a>
Comentarii (4)

CSS poate fi folosit pentru a schimba stilul de ceva. Cel mai probabil ai putea face cu pure CSS este de a ascunde link-ul cu totul.

Ce ai nevoie este un javascript. Aici's cum te-ai'd fac ce vrei tu folosind jQuery bibliotecă.

$('a.current-page').click(function() { return false; });
Comentarii (9)

Bootstrap Cu Handicap 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 Buton Dezactivat, dar se pare ca link-ul

Link
Comentarii (1)

Puteți seta "href" atribut pentru a javascript:void(0)

.disabled {
  /* Disabled link style */
  color: black;
}
<a class="disabled" href="javascript:void(0)">LINK</a>
Comentarii (3)

Dacă doriți să rămânem la doar HTML/CSS pe o formă, o altă opțiune este de a utiliza un buton. Stil și setați "handicap" atribut.

E. g. http://jsfiddle.net/cFTxH/1/

Comentarii (0)

Singura modalitate de ai putea face acest lucru fără CSS ar fi să se stabilească un CSS de pe un ambalaj div care te-a făcut're un dispar și altceva-i ia locul.

De EXEMPLU:


<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah
Comentarii (0)

Dacă vrei să fie numai CSS, dezactivarea logica ar trebui să fie definite prin CSS.

Pentru a muta logică în definiții CSS, ai'll trebuie să utilizați atributul selectoare. Aici sunt câteva exemple :

Dezactiva link-ul care are o exactă href: =

Puteți alege pentru a dezactiva link-uri care conțin un anumit href de valoare astfel :

<a href="//website.com/exact/path">Exact path</a>

[href="//website.com/exact/path"]{
  pointer-events: none;
}

Dezactiva un link care conține o bucată de cale: *=

Aici, orice link cu `/cuvinte cheie/în calea va fi dezactivat

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

Dezactiva un link care incepe cu: ^=

pe [atribut^=valoare] operatorul țintă un atribut care începe cu o anumită valoare. Vă permite să renunțați la site-uri & rădăcină căi.

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

Puteți utiliza chiar și pentru a dezactiva non-https link-uri. De exemplu :

a:not([href^="https://"]){
  pointer-events: none;
}

Dezactiva un link care se termina cu: $=

Pe [atribut$=valoare] operatorul țintă un atribut care se termină cu o anumită valoare. Poate fi util să se debaraseze de extensii de fișiere.

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

Sau orice alt atribut

Css poate viza orice atribut HTML. Ar putea fi "rel", "țintă", de date personalizate și așa mai departe...

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

Combinarea atribut selectoare

Puteți înlănțui mai multe reguli. Las's spun care doriți să dezactivați orice link extern, dar nu cei ce indică spre site-ul :

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

Sau dezactiva link-uri către fișiere pdf de pe un anumit site :

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

Sprijin Browser-ul

Atributele selectoare sunt acceptate de IE7. :nu() selector de IE9.

Comentarii (1)

Încercați acest lucru:


.btn-disable {
    display:inline-block;
    pointer-events: none;       
}
Comentarii (0)

pointer-evenimente proprietate permite controlul asupra modului de elemente HTML răspunde la mouse-ul/touch evenimente – inclusiv CSS hover/active membre, click/robinet evenimente în Javascript, și dacă sau nu cursorul este vizibil.

Ca's nu singura cale de dezactiva un Link, dar un bun CSS modul în care munca în IE10+ și toate browserele noi:

.current-page {
  pointer-events: none;
  color: grey;
}
<a href="#" class="current-page">This link is disabled</a>
Comentarii (1)

Am căutat pe internet și am găsit nu mai mult de această. Practic să dezactivați faceți clic pe butonul funcționalitate, trebuie doar să adăugați stil CSS folosind jQuery astfel:

$("#myLink").css({ 'pointer-events': 'none' });

Apoi, pentru a activa din nou a face acest lucru

$("#myLink").css({ 'pointer-events': '' });

Verificat pe Firefox si IE 11, ea a lucrat.

Comentarii (1)

Am folosit:

.current-page a:hover {
pointer-events: none !important;
}

Și nu era de ajuns, în unele browsere, este încă afișat link-ul, clipind.

Am avut de a adăuga:

.current-page a {
cursor: text !important;
}
Comentarii (1)

puteți utiliza această 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);
}
disabled!
click me!
<a href="http://royansoft.com" disabled="disabled" class="button">test</a>
<a href="http://royansoft.com" class="button">test2</a>
Comentarii (0)

Multumim tuturor celor care au postat solutii, am combinat mai multe abordări pentru a oferi unele mai avansate "handicap" funcționalitate. Aici este o esență, iar codul este mai jos.

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()

Aici este coffescript clasa:

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
Comentarii (1)

Puteți, de asemenea, dimensiunea de un alt element, astfel încât să acopere link-uri (folosind dreptul de z-index): Care va "mananca" clicuri.

(Am descoperit asta de accident, deoarece am avut o problema cu brusc inactiv link-uri din cauza "receptiv" design provocând o H2 pentru a le acoperi, atunci când fereastra browser-ului a fost mobile-de dimensiuni.)

Comentarii (1)

[Demo][1]
Încercați această unul

$('html').on('click', 'a.Link', function(event){
    event.preventDefault();
});
Comentarii (3)
<a href="#!">1) Link With Non-directed url</a><br><br>

<a href="#!" disabled >2) Link With with disable url</a><br><br>
Comentarii (1)

Un alt truc este de a plasa un element invizibil de mai sus. Acest lucru va dezactiva orice efecte hover precum

.myButton{
    position: absolute;
    display: none;
}

.myButton::after{ 
    position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
}
Comentarii (0)

pointer-evenimente:none va dezactiva link-ul:

.disabled {
       pointer-events:none;
}
<a href="#" class="disabled">link</a>
Comentarii (1)