केवल CSS का उपयोग करके किसी लिंक को अक्षम कैसे करें?

844

क्या सीएसएस का उपयोग करके किसी लिंक को अक्षम करने का कोई तरीका है?

मेरे पास एक क्लास है current-pageऔर मैं चाहता हूं कि इस क्लास के लिंक को अक्षम कर दिया जाए ताकि क्लिक करने पर कोई कार्रवाई न हो।

html  css 
— RSK
स्रोत
42
बहुत सारे गुगली के बाद मुझे इस सवाल का सही जवाब मिला css-tricks.com/pointer-events-current-nav
— RSK
1
क्या किसी लिंक का उपयोग किया जाना चाहिए या प्रस्तुति मूल्य से अधिक शब्दार्थ का वहन नहीं करना चाहिए। इसे सीएसएस के माध्यम से अक्षम नहीं किया जाना चाहिए, लेकिन hiddenकिसी HTML तत्व पर लागू होने वाली विशेषता के उपयोग के माध्यम से । CSS का उपयोग तब उदाहरण के लिए किया जा सकता है जैसे कि a[hidden]एंकर और तदनुसार शैली।
— अमन
@ लेकिन मुझे नहीं लगता कि ब्राउज़रों ने छिपी हुई विशेषता के साथ एक तत्व प्रदर्शित किया है ताकि स्टाइल मूट हो जाए।
— user1794469
1
@ user1794469 वे होगा अगर तुम उन्हें हिदायत करने के लिए, सीएसएस, उपयोग करने के साथ display: block, उदाहरण के लिए या के लिए कुछ अन्य मूल्य display। लेकिन hiddenहमेशा लागू नहीं होता है - यह ऐसे तत्वों के लिए है जो अप्रासंगिक हैं , और सवाल से यह स्पष्ट नहीं है कि लिंक को अक्षम क्यों किया जाना चाहिए। यह शायद XY समस्या का मामला है।
— आमजन

जवाबों:

1347

प्रश्न की टिप्पणी में जवाब पहले से ही है। अधिक दृश्यता के लिए, मैं यहां इस समाधान की प्रतिलिपि बना रहा हूं :

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}
<a href="link.html" class="not-active">Link</a>
स्निपेट का विस्तार करें

ब्राउज़र समर्थन के लिए, कृपया https://caniuse.com/#feat=pointer-events देखें । यदि आपको IE का समर्थन करने की आवश्यकता है तो एक वर्कअराउंड है; इस उत्तर को देखें ।

चेतावनी: pointer-eventsगैर-एसवीजी तत्वों के लिए सीएसएस का उपयोग प्रयोगात्मक है। यह फीचर CSS3 UI ड्राफ्ट स्पेसिफिकेशन का हिस्सा हुआ करता था, लेकिन कई खुले मुद्दों के कारण इसे CSS4 के लिए स्थगित कर दिया गया है।

— आरएसके
स्रोत
36
इसके अलावा, यह लिंक तब लिंक करने से बचने के लिए नहीं है।
— जोनो
4
यदि आप इसे थोड़ा स्टाइल करेंगे, तो उपयोगकर्ता इसे अक्षम देख सकता है। इसे कुछ अस्पष्टता दें: .2
— DNRN
4
यह अब IE 11 सहित सभी आधुनिक ब्राउज़रों में काम करता है। यदि आपको IE 10 और नीचे के लिए समर्थन की आवश्यकता है, तो आप इस तरह के रूप में एक जावास्क्रिप्ट पॉलीफ़िल का उपयोग कर सकते हैं ।
— केवॉन
26
महत्वपूर्ण नोट: यह केवल क्लिकिंग को निष्क्रिय करता है, वास्तविक लिंक को ही नहीं। आप लिंक का "क्लिक" करने के लिए अभी भी टैब + दर्ज का उपयोग कर सकते हैं।
— पिकामेंडर 2
11
का उपयोग pointer-events: none;सही नहीं है। यह अन्य घटनाओं जैसे होवर को भी अक्षम करता है, जिसे प्रदर्शित करने title="…"या टूलटिप्स के लिए आवश्यक है । मैंने पाया कि जेएस समाधान event.preventDefault();कुछ सीएसएस ( cursor: default; opacity: 0.4;) और एक टूलटिप के साथ बेहतर (उपयोग कर ) है कि लिंक अक्षम क्यों है।
— क्विन कॉमेंडेंट
140 

.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}
<a href="#" class="disabled">link</a>
स्निपेट का विस्तार करें

— अमीर केशवराज
स्रोत
आपको डिस्प्ले इनलाइन-ब्लॉक (या इनलाइन के अलावा कुछ और) सेट करने की आवश्यकता हो सकती है।
— देव_मस्ता
अच्छा है, लेकिन सूचक-घटनाओं सावधान रहना ब्राउज़र समर्थन (यानी <IE11): caniuse.com/#search=pointer-events
— एक डैरेन
1
शैली के लिए, बदलने की कोशिश pointer-events:none;करें pointer-events:unset;। फिर, कर्सर को इसमें बदला जा सकता है cursor:not-allowed;। यह उपयोगकर्ता को क्या हो रहा है के रूप में एक बेहतर सुराग देता है। आज की तरह एफएफ, एज, क्रोम, ओपेरा और बहादुर में काम करने लगता है।
— सेबलफोस्टे
@Sablefoste क्रोम 60 में मेरे लिए काम नहीं करता है। कर्सर वास्तव में है not-allowed, लेकिन लिंक क्लिक करने योग्य रहता है।
— सूपडॉग
122

CSS का उपयोग केवल कुछ की शैली को बदलने के लिए किया जा सकता है। सबसे अच्छा आप शायद शुद्ध सीएसएस के साथ कर सकते हैं लिंक को पूरी तरह से छिपाना है।

क्या आप वास्तव में जरूरत है कुछ जावास्क्रिप्ट है। यहां बताया गया है कि आप क्या करेंगे जो आप jQuery लाइब्रेरी का उपयोग करना चाहते हैं।

$('a.current-page').click(function() { return false; });
— nickf
स्रोत
21
डिफ़ॉल्ट व्यवहार को रोकने के लिए मत भूलना function(ev){ ev.preventDefault(); ev.stopPropagation(); return false;:।
— ldiqual
5
@ इडीकेल, return falseऐसा करता है
— निक
1
return falseकेवल तभी कार्य करता है जब क्रिया hrefविशेषता का उपयोग करके सेट की जाती है
— जस्टिन
इस संस्करण का उपयोग अन्य पॉइंटर घटनाओं जैसे: होवर या: फ़ोकस को ध्यान में रखते हुए क्लिक को अक्षम करने के लिए किया जा सकता है! शीर्ष उत्तर!
— चार्ली तुपमैन 17
यद्यपि यह सभी ब्राउज़रों में काम करता है, यह केवल एक लिंक पर क्लिक करने में अक्षम है। ध्यान रखें कि कई उपयोगकर्ता संदर्भ मेनू से लिंक खोलने या मध्य माउस बटन का उपयोग करने के लिए उपयोग किए जाते हैं।
— एलेक्जेंड्रू सेवेरिन
33

सीएसएस ऐसा नहीं कर सकता। CSS केवल प्रस्तुति के लिए है। आपके विकल्प हैं:

  • hrefविशेषता को अपने <a>टैग में शामिल न करें।
  • उपयोग जावास्क्रिप्ट, उस के साथ लंगर तत्वों को खोजने के लिए class, और उनके हटाने hrefया onclickतदनुसार विशेषताओं। jQuery उस के साथ आपकी मदद करेगा (NickF ने दिखाया कि कुछ इसी तरह लेकिन बेहतर कैसे करें)।
— केविन कोनर
स्रोत
30
यह सही उत्तर नहीं है - सूचक-घटनाएँ: कोई नहीं; css इसे डिसेबल कर सकते हैं।
— पीआई
मैंने ऐसा नहीं सोचा था! या हो सकता है कि यह विशेषता 2010 में अभी तक मौजूद नहीं थी? किसी भी मामले में यह सच है कि pointer-events: noneमाउस ईवेंट को अक्षम कर सकते हैं। हालाँकि, यह अंतर्निहित लिंक को अक्षम नहीं करता है। Chrome 81 में मैंने एक परीक्षण में, मैं अब भी इस तरह के लिंक को सक्रिय कर सकता हूं और रिटर्न कुंजी टाइप कर सकता हूं।
— केविन कोनर
31

बूटस्ट्रैप विकलांग लिंक

<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>
— जिगर भट्ट
स्रोत
19

आप के hrefलिए विशेषता सेट कर सकते हैंjavascript:void(0)

.disabled {
  /* Disabled link style */
  color: black;
}
<a class="disabled" href="javascript:void(0)">LINK</a>
स्निपेट का विस्तार करें

— Xinus
स्रोत
2
@nickf सच है, हालांकि, यह एक साफ समाधान है और अक्षम होने पर खराब डिफ़ॉल्ट IE स्टाइल पर भरोसा करने से बेहतर है।
— सॉसेजफिंगर 12
मुझे लगता है कि यह उससे थोड़ा अधिक जटिल हो सकता है। यहाँ एक समाधान है snook.ca/archives/javascript/clear_links_to_1
— माइक
12

मैंनें इस्तेमाल किया:

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

और पर्याप्त नहीं था; कुछ ब्राउज़रों में यह अभी भी लिंक को प्रदर्शित करता है, निमिष।

मुझे जोड़ना था:

.current-page a {
cursor: text !important;
}
— पाब्लो मोलिना
स्रोत
3
मुझे लगता a[disabled]:active { pointer-events: none !important; }है कि बेहतर है।
— मासमोतो मियाटा
10

यदि आप किसी फ़ॉर्म पर सिर्फ HTML / CSS से चिपके रहना चाहते हैं, तो एक अन्य विकल्प बटन का उपयोग करना है। इसे स्टाइल करें और disabledविशेषता सेट करें ।

जैसे http://jsfiddle.net/cFTxH/1/

— सेबस्टियन पैटन
स्रोत
10

यदि आप चाहते हैं कि यह केवल सीएसएस हो, तो अक्षम तर्क को सीएसएस द्वारा परिभाषित किया जाना चाहिए।

CSS परिभाषाओं में तर्क को स्थानांतरित करने के लिए, आपको विशेषता चयनकर्ताओं का उपयोग करना होगा। यहाँ कुछ उदाहरण हैं :

सटीक href करने के लिए लिंक अक्षम करें: =

आप उन लिंक को अक्षम करना चुन सकते हैं जिनमें एक विशिष्ट href मान होता है जैसे:

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

[href="https://stackoverflow.com//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;
}

या किसी विशिष्ट वेबसाइट की पीडीएफ फाइलों के लिंक को अक्षम करें:

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

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

ब्राउज़र का समर्थन

IE7 के बाद से चयनकर्ताओं का समर्थन किया जाता है। :not()IE9 के बाद से चयनकर्ता।

— Creaforge
स्रोत
मैं विकलांग चयनकर्ता का उपयोग करके किसी लिंक को कैसे अक्षम कर सकता हूं? उदा। <a class="test" अक्षम href="3"> परीक्षण </a> a: अक्षम {कर्सर: अनुमति नहीं; }
— 20
10

एक तरह से आप सीएसएस के साथ ऐसा कर सकते हैं, एक सीएसएस को एक रैपिंग पर सेट करना होगा divजिसे आप गायब करने के लिए सेट करते हैं और कुछ और जगह लेता है।

उदाहरण के लिए:

<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah</span
</div>

एक सीएसएस की तरह

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

वास्तव में बंद करने के लिए aआपको hrefदूसरों के द्वारा बताए गए स्थान पर क्लिक करना होगा ।

पुनश्च: बस स्पष्ट करने के लिए मैं इस पर काफी हद तक विचार करूंगा, और SEO के लिए यह सबसे अच्छा भी नहीं है, लेकिन मेरा मानना ​​है कि यह विशुद्ध रूप से CSS के साथ सबसे अच्छा है।

— fyjham
स्रोत
8

इसे इस्तेमाल करे:

<style>
.btn-disable {
    display:inline-block;
    pointer-events: none;       
}
</style>
— Benk
स्रोत
6

सूचक-घटनाओं संपत्ति पर नियंत्रण के लिए अनुमति देता है कैसे माउस को HTML तत्वों जवाब / स्पर्श घटनाओं - CSS होवर / सक्रिय राज्यों, क्लिक / जावास्क्रिप्ट में घटनाओं नल, और चाहे या नहीं कर्सर दिखाई दे रहा है भी शामिल है।

यह एकमात्र तरीका नहीं है जिससे आप एक लिंक अक्षम करते हैं , लेकिन एक अच्छा CSS तरीका जो IE10 + और सभी नए ब्राउज़रों में काम करता है:

.current-page {
  pointer-events: none;
  color: grey;
}
<a href="#" class="current-page">This link is disabled</a>
स्निपेट का विस्तार करें

— एलिरेज़ा
स्रोत
4

मैं इंटरनेट पर खोज की है और कोई तुलना में बेहतर पाया इस । मूल रूप से बटन क्लिक कार्यक्षमता को निष्क्रिय करने के लिए, बस jQuery का उपयोग करके सीएसएस शैली जोड़ें, जैसे:

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

फिर इसे फिर से सक्षम करने के लिए ऐसा करें

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

फ़ायरफ़ॉक्स और IE 11 पर जाँच की, यह काम किया।

— फैसल मक
स्रोत
3
इसके लिए आपको jQuery की आवश्यकता नहीं है, आप इसे CSS में स्वयं सेट कर सकते हैं।
— ब्रैम वेनरो
3

आप इस सीएसएस का उपयोग कर सकते हैं:

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>
स्निपेट का विस्तार करें

— जावद शरीयत
स्रोत
2

समाधान पोस्ट करने वाले सभी के लिए धन्यवाद, मैंने कुछ और उन्नत 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()

यहाँ कोफ़स्क्रिप्ट श्रेणी है:

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या कुछ और नहीं है!
— मेहदी देहगांई
1

आप किसी अन्य तत्व को भी आकार दे सकते हैं ताकि यह लिंक (सही जेड-इंडेक्स का उपयोग करके) को कवर करे: यह क्लिकों को "खाएगा"।

(हमने इसे दुर्घटना से खोजा क्योंकि "उत्तरदायी" डिज़ाइन के कारण अचानक निष्क्रिय लिंक के साथ एक मुद्दा था, जब ब्राउज़र विंडो मोबाइल के आकार का था तब उन्हें कवर करने के लिए एक एच 2 का कारण बनता था।

— तोर इवर विल्हेमसेन
स्रोत
सच है, लेकिन कीबोर्ड नेविगेशन के लिए नहीं।
— एंडफिशर
1

यहाँ डेमो
यह एक कोशिश करो

$('html').on('click', 'a.Link', function(event){
    event.preventDefault();
});
— सुरेश पट्टू
स्रोत
1
आपका फिडल काम नहीं करता है! लिंक अभी भी क्रोम में सक्रिय है।
— मैट ब्रेन
इस कोड को ठीक करने के लिए, पहले पारित किए गए दो मापदंडों (): $ ('html') पर स्वैप करें।
— 2C-B
1
हैलो !!, उत्तर के बारे में CSSहै JSया कुछ और नहीं है!
— मेहदी देघानी
0

इसके ऊपर एक अदृश्य तत्व रखने के लिए एक और तरकीब है। यह किसी भी होवर प्रभाव को अक्षम कर देगा

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

.myButton::after{ 
    position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
}
— air5
स्रोत
-1

यह सीएसएस में करना संभव है

.disabled{
  cursor:default;
  pointer-events:none;
  text-decoration:none;
  color:black;
}
<a href="https://www.google.com" target="_blank" class="disabled">Google</a>
स्निपेट का विस्तार करें

इस पर देखा:

कृपया ध्यान दें कि text-decoration: none;और color: black;की जरूरत नहीं है लेकिन इसे और अधिक सादे पाठ की तरह कड़ी नज़र आता है।

-1

pointer-events:none लिंक को अक्षम कर देगा:

.disabled {
       pointer-events:none;
}
<a href="#" class="disabled">link</a>
— निकी
स्रोत
1
यह अच्छा है, लेकिन निश्चित रूप से, काम नहीं कर रहा है यदि उपयोगकर्ता अपने कीबोर्ड का उपयोग करते हैं :(
— gztomas
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.