Mai mult
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.
821
21
Răspunsul este deja în comentarii întrebarea. Pentru mai multă vizibilitate, sunt copierea această soluție aici:
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.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ă.
CSS poate't face asta. CSS este cu titlu de prezentare. Opțiunile sunt:
Bootstrap Cu Handicap Link
Bootstrap Buton Dezactivat, dar se pare ca link-ul
Puteți seta "href" atribut pentru a
javascript:void(0)
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/
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:
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 :
Dezactiva un link care conține o bucată de cale:
*=
Aici, orice link cu `/cuvinte cheie/în calea va fi dezactivat
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.Puteți utiliza chiar și pentru a dezactiva non-https link-uri. De exemplu :
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.Sau orice alt atribut
Css poate viza orice atribut HTML. Ar putea fi "rel", "țintă", de date personalizate și așa mai departe...
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 :
Sau dezactiva link-uri către fișiere pdf de pe un anumit site :
Sprijin Browser-ul
Atributele selectoare sunt acceptate de IE7.
:nu()
selector de IE9.Încercați acest lucru:
Ca's nu singura cale de dezactiva un Link, dar un bun CSS modul în care munca în IE10+ și toate browserele noi:
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:
Apoi, pentru a activa din nou a face acest lucru
Verificat pe Firefox si IE 11, ea a lucrat.
Am folosit:
Și nu era de ajuns, în unele browsere, este încă afișat link-ul, clipind.
Am avut de a adăuga:
puteți utiliza această css:
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.
Aici este coffescript clasa:
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.)
[Demo][1]
Încercați această unul
Un alt truc este de a plasa un element invizibil de mai sus. Acest lucru va dezactiva orice efecte hover precum
pointer-evenimente:none
va dezactiva link-ul: