आप एंकर लिंक को गैर-क्लिक करने योग्य या अक्षम कैसे बनाते हैं?

Question

मेरे पास एक लंगर लिंक है जिसे मैं उस पर क्लिक करने के बाद अक्षम करना चाहता हूं। या, पाठ के आसपास से एंकर टैग को हटा दें, लेकिन निश्चित रूप से पाठ को रखें।

<a href='' id='ThisLink'>some text</a>

मैं इसे आसानी से जोड़कर एक बटन के साथ कर सकता .attr("disabled", "disabled");
हूं मैंने सफलतापूर्वक अक्षम संपत्ति को जोड़ा, लेकिन लिंक अभी भी क्लिक करने योग्य था।
मुझे वास्तव में परवाह नहीं है कि क्या पाठ को रेखांकित किया गया है या नहीं।

कोई सुराग?

जब आप गलत संगीतकार पर क्लिक करते हैं, तो इसे बस "गलत" जोड़ना चाहिए और फिर अस्पष्ट हो जाना चाहिए।
जब आप क्लिक करते हैं और आप सही होते हैं, तो उसे "भयानक" जोड़ना चाहिए और फिर सभी <a>टैग को अक्षम करना चाहिए ।

Comments

href भाग को निकालें और अपने CSS में जोड़ें: "कर्सर: पॉइंटर", मुझे लगता है कि आपके पास एक $ ('# Thisinkink') है। क्लिक करें या ऐसा कुछ?

— ज़ीउस

$ ( "# ThisLink") माता-पिता () लगता है ( "एक") को हटाने ()।।।

— एडम होम्स

एडम, यह समाधान लगभग काम करता है। यह एक टैग के भीतर सभी पाठ से छुटकारा दिलाता है।

— एविक जेम्स

HTML लिंक को अक्षम करने के

— स्टीव चेम्बर्स

Answer 1

मुझे बस एहसास हुआ कि आप क्या कर रहे थे (मुझे उम्मीद है)। यहाँ एक बदसूरत समाधान है

var preventClick = false;

$('#ThisLink').click(function(e) {
    $(this)
       .css('cursor', 'default')
       .css('text-decoration', 'none')

    if (!preventClick) {
        $(this).html($(this).html() + ' lalala');
    }

    preventClick = true;

    return false;
});

Comments

यह वास्तव में समस्या को हल कर सकता है, जैसे ... के बजाय .click का उपयोग करें, शरीर पर .on और 'a [विकलांग' 'को सौंपें। फिर उसी चयनकर्ता का उपयोग करके सीएसएस कोड को वास्तविक सीएसएस में डालें। फिर, क्लिक को रोकना ईवेंट के समान सरल है ।preventDefault () और झूठी वापसी करें

— lassombra

असहमत, CSS का उपयोग करें "पॉइंटर-ईवेंट: कोई नहीं;" इसके बजाय, बस अन्य unswers में की तरह।

— विट्रिलो

Answer 2

सबसे साफ तरीका यह होगा कि आप पॉइंटर-ईवेंट के साथ एक क्लास जोड़ें: कोई नहीं जब आप एक क्लिक को निष्क्रिय करना चाहते हैं। यह एक सामान्य लेबल की तरह कार्य करेगा।

.disableClick{
    pointer-events: none;
}

Comments

इस विचार को एक और भी आसान तरीका का उपयोग सीएसएस के लिए चयनकर्ता के रूप में उपयोग करने के लिए एक [विकलांग] होगा ताकि आप लंगर के लिए .disableClick वर्ग को जोड़ने के लिए की आवश्यकता नहीं होगी

— Ferran Salguero

हालांकि सावधान रहें क्योंकि आप अभी भी सूचक-घटनाओं के साथ अक्षम चीजों को टैब कर सकते हैं: कोई नहीं

— माइक मेलर

यह समाधान आधुनिक ब्राउज़रों में मेरे लिए अच्छा है। मेरे पास प्रयोग करने योग्य एंकर टैग हैं जो घटनाओं को क्लिक करने के लिए बाध्य हैं, और उन्हें स्पैमिंग को हतोत्साहित करने के लिए क्योंकि उनकी प्रक्रियाएं उनकी बात करती हैं मैं प्रोग्रामेटिक रूप से इसे जोड़ता हूं और फिर प्रक्रिया पूरी होने पर इसे हटा देता हूं। मेरे मामले में एक विकलांग एंकर टैग को टैब करना या तो एक चिंता का विषय है, लेकिन दूसरों के लिए हो सकता है। YMMV

— स्टीफन Tetreault

का उपयोग pointer-events:noneकरना भी अक्षम कर देगा cursor, शीर्षक पाठ, और अन्य माउसओवर इवेंट।

— कीथ

मूल्य कोई भी नहीं है कि माउस ईवेंट को "तत्व" के माध्यम से जाने और इसके बजाय उस तत्व को "नीचे" करने के लिए लक्षित करें। developer.mozilla.org/en-US/docs/Web/CSS/pointer-events जो कुछ लेआउट पर एक समस्या हो सकती है

— user2988142

Answer 3

<a href='javascript:void(0);'>some text</a>

Comments

कृपया अपना समाधान बताएं ताकि भविष्य के आगंतुक इस सवाल को समझ सकें कि यह समस्या को कैसे हल करता है।

— वॉरॉक 10

से: MDN: शून्य ऑपरेटर । जब कोई ब्राउज़र ए का अनुसरण करता है javascript: URI, तो यह यूआरआई में कोड का मूल्यांकन करता है और फिर पृष्ठ की सामग्री को लौटाए गए मान के साथ बदल देता है, जब तक कि लौटा मूल्य नहीं होता है undefined। voidऑपरेटर वापस जाने के लिए इस्तेमाल किया जा सकता undefined। उदाहरण के लिए: <a href="javascript:void(0);"> Click here to do nothing </a> ध्यान दें, हालांकि, javascript:छद्म प्रोटोकॉल अन्य विकल्पों, जैसे विनीत घटना संचालकों पर हतोत्साहित किया जाता है।

— लेनिन

Answer 4

पॉइंटर-ईवेंट सीएसएस शैली का उपयोग करें । (जैसा कि जेसन मैकडॉनल्ड ने सुझाव दिया)

MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events देखें । अधिकांश ब्राउज़रों में इसका समर्थन किया गया।

एंकर के लिए सरल "अक्षम" विशेषता जोड़ने का काम करेगा यदि आपके पास वैश्विक सीएसएस नियम निम्नलिखित हैं:

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

Comments

एक वर्ग के बजाय [विकलांग] विशेषता के माध्यम से स्टाइल को जोड़ने के लिए +1। यह ध्यान दिया जाना चाहिए कि सूचक-घटनाएं: कोई नहीं; IE11 से पुराने कुछ में काम नहीं करता है।

— डैनियल टोनन

सभी IE के पास डिफ़ॉल्ट रूप से लंगर, बटन और यहां तक ​​कि अन्य तत्वों को अक्षम करने का अपना स्वामित्व तर्क है। गैर-IE ब्राउज़र के लिए आवश्यक वर्कअराउंड।

— विट्राइलो

+1। बस इसलिए मुझे अगली बार इसे फिर से देखने की ज़रूरत नहीं है: आवश्यक जावास्क्रिप्ट (jQuery का उपयोग करके) होगा $("#elementid").attr("disabled", "disabled");। cursor: defaultसीएसएस में शामिल करने के लिए भी सहायक हो सकता है (जैसा कि मुहम्मद नासिर द्वारा सुझाया गया है)।

— एएसएल

तत्वों में एक निष्क्रिय विशेषता नहीं होती है , इसे चयनकर्ता के रूप में उपयोग कर सकते हैं या काम नहीं कर सकते हैं।

— RobG

सहज - अच्छा समाधान। मुझे वास्तव में यह जानकर आश्चर्य हुआ कि <a />तत्वों में एक अक्षम विशेषता नहीं है - अजीब लगता है।

— मोरवेल

Answer 5

$('a').removeAttr('href')

या

$('a').click(function(){ return false})

यह स्थिति पर निर्भर करता है

Comments

निष्कासन के माध्यम से हटाना मेरे लिए काम नहीं करता है। .removeAttr ("href") awesomealbums.info/?WhoAmI

— Evik James

Answer 6

बूटस्ट्रैप हमें .disabledकक्षा प्रदान करता है । कृपया इसका उपयोग करें।

लेकिन .disabledक्लास तभी काम करती है जब 'a' टैग में पहले से ही क्लास 'bnn' हो। यह किसी भी पुराने 'ए' टैग पर काम नहीं करता है। btnवर्ग कुछ संदर्भ में उपयुक्त नहीं हो सकता के रूप में यह शैली अर्थ हैं। कवर के तहत, .disabledवर्ग सेट करता pointer-eventsहै none, इसलिए आप सीएसएस को वही काम कर सकते हैं, जैसा कि सरोज आर्यल और विट्रिलो ने किया है। (इस सलाह के लिए धन्यवाद, लेस नाइटिंगिल)।

Comments

.disabled वर्ग तभी काम करता है जब 'a' टैग में पहले से ही वर्ग 'btn' हो। यह किसी भी पुराने 'ए' टैग पर काम नहीं करता है। 'बीटीएन' वर्ग कुछ संदर्भों में उचित नहीं हो सकता है क्योंकि इसमें शैली अर्थ हैं। कवर के तहत .disabled वर्ग किसी को भी पॉइंटर-ईवेंट सेट करता है, इसलिए आप वही काम कर सकते हैं जो सरोज आर्यल और विट्रिलो ने किया है।

— लेस नाइटिंगिल

आपकी विस्तृत टिप्पणी के लिए धन्यवाद। यह कई उपयोगकर्ताओं के लिए बहुत कुछ स्पष्ट करता है। क्या मैं अपना उत्तर देने के लिए आपकी टिप्पणी के कुछ पाठ का उपयोग कर सकता हूं?

— येवगेनी अफानसेयेव

Answer 7

एक cssवर्ग जोड़ें :

.disable_a_href{
    pointer-events: none;
}

इसे जोड़ें jquery:

$("#ThisLink").addClass("disable_a_href"); 

Answer 8

बस hrefएंकर टैग से विशेषता को हटा दें ।

Comments

कुछ ब्राउज़रों में href निकालने से बस / या वर्तमान पृष्ठ href सेट होता है।

— बहुपद

मुझे लगता है कि यह पहला दृष्टिकोण होना चाहिए

— बास स्लैगटर

Answer 9

सबसे अच्छा तरीका डिफ़ॉल्ट कार्रवाई को रोकना है। एंकर टैग के मामले में, डिफ़ॉल्ट व्यवहार hrefनिर्दिष्ट पते पर पुनर्निर्देशित होता है ।

तो निम्नलिखित जावास्क्रिप्ट स्थिति में सबसे अच्छा काम करता है:

$('#ThisLink').click(function(e)
{
    e.preventDefault();
});

Answer 10

आप क्लिक क्रिया को अक्षम करने के लिए ऑनक्लिक ईवेंट का उपयोग कर सकते हैं:

<a href='' id='ThisLink' onclick='return false'>some text</a>

या आप केवल एक <a>टैग के अलावा कुछ का उपयोग कर सकते हैं ।

Comments

आप इसे इसके साथ जोड़ सकते हैं text-decoration: noneऔर .disabledLink { color: #000 !important; }इसे नियमित पाठ की तरह दिखा सकते हैं।

— बहुपद

आज्ञाकारी जावास्क्रिप्ट एक भयानक समाधान है।

— जह्रीची

Answer 11

जेसन मैकडोनाल्ड की टिप्पणियों ने मेरे लिए क्रोम, मोज़िला और IE में परीक्षण किया।

अक्षम प्रभाव दिखाने के लिए ग्रे रंग जोड़ा गया।

.disable_a_href{
    pointer-events: none;
    **color:#c0c0c0 !important;**
}

लंगर सूची में केवल पहले तत्व का चयन कर रहा था, आईडी के साथ सभी तत्व को चुनने और अक्षम करने के लिए मेटा चरित्र (*) जोड़ा गया #ThisLink।

$("#ThisLink*").addClass("disable_a_href"); 

Answer 12

इसे jQuery कोड की सिंगल लाइन लिखें

$('.hyperlink').css('pointer-events','none');

यदि आप css फ़ाइल में लिखना चाहते हैं

.hyperlink{
    pointer-events: none;
}

Answer 13

शैली पत्रक में निम्न वर्ग बनाएं:

  .ThisLink{
           pointer-events: none;
           cursor: default;
    }

इस क्लास को आप डायनामिक रूप से फॉलो के रूप में जोड़ें।

 <a href='' id='elemID'>some text</a>

    //   or using jquery
<script>
    $('#elemID').addClass('ThisLink');
 </script>

Comments

यह जेसन मैकडोनाल्ड के जवाब से कैसे अलग है ?

— सभी कार्यकर्ता आवश्यक हैं

Answer 14

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

$('a').contents().unwrap();

Comments

एंकर क्या स्टाइल नियम रखता है जो उनके कार्यक्रम के लिए आवश्यक है, यह एक फिक्स है जो सीएसएस की अवहेलना करता है

— ट्रेवर रूडोल्फ

Answer 15

बस SASS में:

.some_class{
     // styles...

     &.active {
       pointer-events:none;
     }
}

Comments

यद्यपि यह कोड प्रश्न का उत्तर दे सकता है, क्यों और / या कैसे का उत्तर देता है के संबंध में अतिरिक्त संदर्भ प्रदान करने से इसके दीर्घकालिक मूल्य में काफी सुधार होगा। कृपया कुछ स्पष्टीकरण जोड़ने के लिए अपने उत्तर को संपादित करें।

— टोबी स्पाइट

Answer 16

यह वह विधि है जिसे मैंने अक्षम करने के लिए उपयोग किया था। यह मदद करता है।

$("#ThisLink").attr("href","javascript:;");

Comments

यह सरल और आसान उपाय है और इसे स्वीकार किया जाना चाहिए!

— Si8

Answer 17

$('#ThisLink').one('click',function(){
  $(this).bind('click',function(){
    return false;
  });
});

ऐसा करने का यह एक और तरीका return falseहोगा, जिसके साथ हैंडलर , जो लिंक को अक्षम कर देगा, एक क्लिक के बाद जोड़ा जाएगा।

Answer 18

सबसे आसान तरीका

अपने HTML में:

<a id="foo" disabled="true">xxxxx<a>

आपके जेएस में:

$('#foo').attr("disabled", false);

यदि आप इसका उपयोग विशेषता के रूप में पूरी तरह से काम करते हैं

Comments

विकलांगों को <a> टैग के लिए एक मान्य विशेषता नहीं है

— जोसपास