विकलांग href टैग

Question

हालाँकि यह लिंक अक्षम है, फिर भी यह क्लिक करने योग्य है।

<a href="/" disabled="disabled">123n</a>

अगर मैं इसे अक्षम करता हूं तो क्या मैं इसे क्लिक करने योग्य नहीं बना सकता हूं? क्या मुझे आवश्यक रूप से जावास्क्रिप्ट का उपयोग करना चाहिए?

Comments

देखें stackoverflow.com/questions/2091168/disable-a-link-using-css

— फ्रेड फू

स्पष्टीकरण के लिए: मैं अनुमान लगा रहा हूं कि आपका क्या मतलब है कि आपने लिंक अक्षम कर दिया है, लेकिन "क्लिक" ईवेंट अभी भी आग लगा रहा है?

— लेवी हैकविथ

आप सूचक-घटनाओं का उपयोग कर सकते हैं: कोई नहीं; css में

— ppsreejith

आप preventDefault () का उपयोग कर सकते हैं; stackoverflow.com/questions/1357118/…

— Ciack404

लेकिन क्यों नहीं बस href विशेषता को हटा दें?

— MrBoJangles

Answer 1

हाइपरलिंक के लिए कोई अक्षम विशेषता नहीं है। यदि आप कुछ लिंक नहीं करना चाहते हैं, तो आपको <a>टैग को पूरी तरह से हटाने , या उसकी hrefविशेषता को हटाने की आवश्यकता होगी ।

Comments

यह काम करता है, लेकिन अगर आप इस पर मौजूदा CSS छोड़ते हैं तो मैं इसे बुरा UX मानूंगा। उपयोगकर्ता इसे क्लिक करेगा और सोचेगा कि कुछ टूट गया है। आपको उपयोगकर्ता को कभी भी भ्रमित नहीं होने देना चाहिए कि क्या हो रहा है।

— agm1984

बस कर्सर जोड़ना: कोई नहीं; प्रासंगिक लिंक कर्सर के रूप में ज्यादा हासिल करने के लिए लगता है: कोई नहीं; सूचक-घटनाएँ: कोई नहीं; । । । । किसी भी दर पर यह मेरे लिए एकल-पृष्ठ ऐप साइट में पृष्ठ के परिवर्तन को सक्षम कर रहा है।

— ट्रंक

यदि आप CSS कर्सर या पॉइंटर-ईवेंट का उपयोग करते हैं, तब भी यह लिंक ध्यान देने योग्य और "क्लिक करने योग्य" (कीबोर्ड का उपयोग करके) कीबोर्ड के उपयोग से होगा, जो कि संभवत: खराब है यदि आप कुछ को निष्क्रिय करने की कोशिश कर रहे हैं तो या तो href विशेषता को हटा दें या इसे चालू करें स्पैन

— टॉम गोल्डन

आप onclick="return false;"एंकर टैग में भी जोड़ सकते हैं और शायद एक titleविशेषता जोड़ सकते हैं जो बताता है कि लिंक मान्य नहीं है।

— क्रेग लंदन

इसके अलावा, मेरा मानना ​​है कि केवल बाहर समाशोधन hrefऔर छोड़ना <a>एडीए के अनुरूप नहीं होगा।

— स्लॉथफ्रेंड

Answer 2

सीएसएस की मदद से आप हाइपरलिंक को निष्क्रिय कर देंगे। नीचे की कोशिश करो

a.disabled {
  pointer-events: none;
  cursor: default;
}

<a href="link.html" class="disabled">Link</a>

Comments

कृपया ध्यान दें कि यह केवल इंटरनेट एक्सप्लोरर 11+

— पैट्रिक हिलर्ट सेप

जब टैब कुंजी के साथ लिंक टैग पर ध्यान केंद्रित करें और दर्ज करें यह संपत्ति काम नहीं करती है।

— माजिद बशीरती

यदि आपको IE9-10 की परवाह नहीं है तो केवल उत्तर होना चाहिए

— रिंगो

यह हॉवर ईवेंट को भी निष्क्रिय कर देता है, जिसका अर्थ है कि कर्सर स्टाइल काम नहीं करता है। (<span> & # x20E0; </ span> <- आपके अक्षम लिंक पर इनमें से कोई भी नहीं है।)

— सेठ बैटन

सक्रिय और अक्षम लिंक के बीच अंतर करने के लिए भी अस्पष्टता का उपयोग करें। opacity: 0.5;

— आमेर शहजाद

Answer 3

आप उपयोग कर सकते हैं:

<a href="/" onclick="return false;">123n</a>

Comments

काम नहीं करेगा तो क्लिक इवेंट के लिए हैंडलर के रूप में पहले से ही एक फंक्शन है

— rahul shukla

Answer 4

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

एचटीएमएल

<a>link</a>

जावास्क्रिप्ट

<a href="javascript:function() { return false; }">link</a>
<a href="/" onclick="return false;">link</a>

सीएसएस

<a href="www.page.com" disabled="disabled">link</a>

<style type="text/css">
    a[disabled="disabled"] {
        pointer-events: none;
    }
</style>

---

Answer 5

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

<a href="javascript:void(0)" style="cursor: default;">123n</a>

Comments

सही है, मैं हमेशा href = "javascript: void (0)" का उपयोग करता हूं

— Jan Hamara

यह भी एक अच्छा स्पर्श है, अगर आप अभी भी "कॉपी लिंक" जैसे राइट क्लिक के कार्य को बनाए रखना चाहते हैं

— डेवलपर एसपीएम

Answer 6

<a>टैग एक नहीं है disabledविशेषता, बस के लिए है कि <input>(और <select>है और <textarea>रों)।

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

Comments

@rocket क्या href विशेषता को हटाने के कोई निहितार्थ हैं? मेरा मतलब है, यह एक अनिवार्य विशेषता माना जाता है। ऐसा नहीं है कि इस तरह की बात आजकल बहुत मायने रखती है।

— रिंगो

@ बिंगो: hrefजब आप उस पर मंडराते हैं, तो कर्सर को नहीं बदला जा सकता है।

— रॉकेट हज़मत

Answer 7

<a>इससे छुटकारा पाने के लिए आपको टैग हटाने की आवश्यकता है ।

या प्रयोग करके देखें: -

  <a href="/" onclick="return false;">123n</a>

Answer 8

HTML:

<a href="/" class="btn-disabled" disabled="disabled">123n</a>

सीएसएस:

.btn-disabled,
.btn-disabled[disabled] {
  opacity: .4;
  cursor: default !important;
  pointer-events: none;
}

Answer 9

टिप्स 1: सीएसएस का उपयोग करना pointer-events: none;

टिप्स 2: जावास्क्रिप्ट का उपयोग करना javascript:void(0) (यह एक सर्वोत्तम अभ्यास है)

<a href="javascript:void(0)"></a>

टिप्स 1: जेकरी का उपयोग करना $('selector').attr("disabled","disabled");

Answer 10

सीएसएस केवल: यह से लिंक हटाता है href।

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

Answer 11

एक माता-पिता को pointer-events: noneबच्चे a-tagको इस तरह से निष्क्रिय करने की आवश्यकता होगी (यह आवश्यक है कि div एक को कवर करता है और 0 चौड़ाई / ऊंचाई नहीं है):

<div class="disabled">
   <a href="/"></a>
</div>

कहाँ पे:

.disabled {
    pointer-events: none;
}

Comments

आप "पॉइंटर-ईवेंट्स: कोई नहीं" शैली को सीधे <a> टैग पर भी लागू कर सकते हैं, उदाहरण के लिए .Davabled क्लास को जावास्क्रिप्ट के साथ जोड़कर जब आप इसे अक्षम करना चाहते हैं। एक रैपिंग <div> आवश्यक नहीं है।

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

यहां दिखाए गए अनुसार लपेटें की आवश्यकता नहीं है: क्रोम, फ़ायरफ़ॉक्स और सफारी के लिए https://jsfiddle.net/d1owm1d0/1/ । क्या आप एक अलग ब्राउज़र का उपयोग कर रहे हैं जहाँ मेरा डेमो विफल रहता है?

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

@LesNightingill अगर एक टैग कुछ काम नहीं करता है लपेटता है: jsfiddle.net/d9gwgdyf

— Ferus

यह सही है @ फेरस। मुझे यकीन नहीं है कि यह सच क्यों है।

— लेस

Answer 12

$(document).ready(function() {
   $('a').click(function(e) {
     e.preventDefault();
  });
});

Comments

यह कोड सही क्लिक पर काम कर रहा है। इसका कोई सटीक समाधान नहीं है।

— लखन

Answer 13

आप इस कोड का उपयोग करके रन टाइम पर जावास्क्रिप्ट का उपयोग करके लिंक को अक्षम कर सकते हैं

$ ('पेज-लिंक')। सीएसएस ("पॉइंटर-इवेंट", "कोई नहीं");

Comments

पार्टी के लिए देर से, लेकिन यह किसी भी कर्सर सीएसएस को हटा देता है। यदि कोई लिंक अक्षम है, तो मेरे मामले में, मैं "कर्सर: नहीं-अनुमति" का उपयोग करता हूं।

— स्टीव

Answer 14

यदि आप पॉइंटर से छुटकारा चाहते हैं तो आप कर्सर का उपयोग करके सीएसएस के साथ ऐसा कर सकते हैं ।

Answer 15

आप <a>टैग पर अक्षम विशेषता का अनुकरण कर सकते हैं ।

<a href="link.html" disabled="">Link</a>

a[disabled] {
   pointer-events: none;
   cursor: default;
}

Answer 16

मेरे मामले में, मैं उपयोग करता हूं

<a href="/" onClick={e => e.preventDefault()}>

Answer 17

मेरे पास एक है:

<a href="#">This is a disabled tag.</a>

आशा है इससे आपकी मदद होगी ;)

Comments

हाय Werenverlivitz, आपका स्वागत है। अच्छा लगा, आपने ऐसा जवाब देने वाले 7-8 साल बाद पहला व्यक्ति नहीं माना होगा!

— टियागो मार्टिंस पेर

Answer 18

हम इसे सीधे अक्षम नहीं कर सकते, लेकिन हम निम्नलिखित कार्य कर सकते हैं

1. जोड़ते हैं type="button"।
2. href=""विशेषता निकालें ।
3. disabledविशेषता जोड़ें तो यह दर्शाता है कि दरबार को बदलने से इसका अक्षम होना और यह मंद हो जाता है।

निम्नलिखित एक उदाहरण है

<?php
if($status=="Approved"){ 
?>
  <a type="button" class="btn btn-primary btn-xs" disabled> EDIT
     </a>
  <?php    
}else{
?>
  <a href="index.php" class="btn btn-primary btn-xs"> EDIT
    </a>
  <?php    
}
?>

Answer 19

मैं एनजी-एचआरई टेर्नेरी ऑपरेशन का उपयोग करके वांछित परिणाम प्राप्त करने में सक्षम था

<a ng-href="{{[condition] ? '' : '/'}}" ng-class="{'is-disabled':[condition]}">123n</a>

कहाँ पे

a.is-disabled{
   color: grey;
   cursor: default;

   &:hover {
      text-decoration: none;
   }
} 

Answer 20

बटन और लिंक का सही उपयोग करें।

• बटन एक वेब पेज (संवाद, विस्तार / पतन क्षेत्रों) पर स्क्रिप्ट की कार्यक्षमता को सक्रिय करते हैं ।

• लिंक आपको दूसरे स्थान पर ले जाता है, या तो एक ही पृष्ठ पर एक अलग पृष्ठ या अलग स्थान पर।

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

<a href="" ng-click="Ctrl._isLinkActive && $ctrl.gotoMyAwesomePage()"

आप एक्सेसिबिलिटी पर विचार नहीं कर रहे हैं और स्क्रीन रीडर इसे लिंक के रूप में पढ़ेंगे और दृष्टिबाधित लोग यह सोचते रहेंगे कि लिंक काम क्यों नहीं कर रहा है।

Answer 21

यदि आप वर्डप्रेस का उपयोग कर रहे हैं, तो मैंने एक प्लगइन बनाया जो यह जानने की आवश्यकता के बिना ऐसा कर सकता है और बहुत कुछ कर सकता है। आपको केवल उस लिंक के चयनकर्ता को जोड़ना है जिसे आप अक्षम करना चाहते हैं और फिर "इस चयनकर्ता के साथ सभी लिंक एक नए टैब में अक्षम करें" चुनें। दिखाई देने वाले ड्रॉपडाउन मेनू से और अपडेट पर क्लिक करें।

यह प्रदर्शित करने वाले जिफ़ को देखने के लिए यहां क्लिक करें

आप इसे आज़माने के लिए WordPress.org Plugin रिपॉजिटरी से मुफ्त संस्करण प्राप्त कर सकते हैं ।

Answer 22

टैग को अक्षम करने के विभिन्न तरीके यहां दिए गए हैं:

<a >Link Text</a> remove the href from your anchor tag
<a href=”javascript:void(0)”/>Link text</a> put javascript:void(0) in href
<a href="/" onclick="return false;">Link text</a> using return false

जैसा कि एंकर टैग के लिए कोई अक्षम विशेषता नहीं है। यदि आप jQuery फ़ंक्शन के अंदर एंकर टैग व्यवहार को रोकना चाहते हैं, तो आप फ़ंक्शन की शुरुआत में नीचे की रेखा का उपयोग कर सकते हैं:

$( "a" ).click(function( e ) {
e.preventDefault();
$( "<div>" )
.append( "default " + e.type + " prevented" )
.appendTo( "#log" );
});

event.preventDefault ()

Answer 23

मैं देख रहा हूं कि यहां पहले से ही एक टन के उत्तर पोस्ट किए गए हैं, लेकिन मुझे नहीं लगता कि कोई भी स्पष्ट अभी तक है जो पहले से उल्लेख किए गए दृष्टिकोणों को जोड़ देता है जो मुझे काम करने के लिए मिला है। यह लिंक को दोनों को निष्क्रिय करने के लिए है, और उपयोगकर्ता को किसी अन्य पृष्ठ पर रीडायरेक्ट भी नहीं करना है।

यह उत्तर मानता है कि आप jquery और बूटस्ट्रैप का उपयोग कर रहे हैं , और hrefअक्षम करते समय संपत्ति को अस्थायी रूप से संग्रहीत करने के लिए किसी अन्य गुण का उपयोग करता है ।

//situation where link enable/disable should be toggled
function toggle_links(enable) {
    if (enable) {
        $('.toggle-link')
        .removeClass('disabled')
        .prop('href', $(this).attr('data-href'))
    }
    else {
        $('.toggle-link')
        .addClass('disabled')
        .prop('data-href', $(this).prop('href'))
        .prop('href','#')
    }

a.disabled {
  cursor: default;
}

Answer 24

जब आप इस पर माउस डालेंगे तो href टैग में कुछ भी ब्राउज़र विंडो के निचले-बाएँ प्रदर्शित होगा।

मुझे लगता है कि व्यक्तिगत रूप से जावास्क्रिप्ट जैसी कोई चीज़ है : उपयोगकर्ता को प्रदर्शित शून्य (0) छुपा हुआ है।

इसके बजाय, href को छोड़ दें , अपना जादू jQuery के साथ करें / जो भी हो और एक शैली नियम जोड़ें (यदि आपको अभी भी इसे लिंक की तरह देखने की आवश्यकता है):

a {
    cursor:pointer;
}

Answer 25

सबसे अच्छा जवाब हमेशा सबसे सरल होता है। किसी भी कोडिंग की आवश्यकता नहीं है।

यदि (ए) एंकर टैग में कोई href विशेषता नहीं है, तो यह केवल हाइपरलिंक के लिए प्लेसहोल्डर है। सभी ब्राउज़रों द्वारा समर्थित!

<a href="/">free web counters</a><br  />
<a "/">free web counters</a>

Answer 26

आप झूठे रिटर्न करके एंकर टैग को अक्षम कर सकते हैं। मेरे मामले में Im एक Jquery समझौते के लिए कोणीय और एनजी-अक्षम का उपयोग कर रहा है और मुझे अनुभागों को अक्षम करने की आवश्यकता है।

तो मैंने इसे ठीक करने के लिए थोड़ा js स्निपेट बनाया।

       <a class="opener" data-toggle="collapse"
                   data-parent="#shipping-detail"
                   id="shipping-detail-section"
                   href="#shipping-address"
                   aria-expanded="true"
                   ng-disabled="checkoutState.addressSec">
                   Shipping Address</a>
     <script>
          $("a.opener").on("click", function () {
           var disabled = $(this).attr("disabled");
           if (disabled === 'disabled') {
            return false;
           }
           });
     </script>

Answer 27

यदि आप केवल लिंक को अस्थायी रूप से अक्षम करना चाहते हैं, लेकिन बाद में सक्षम करने के लिए href छोड़ें (जो कि मैं करना चाहता था) मैंने पाया कि सभी ब्राउज़र पहले href का उपयोग करते हैं। इसलिए मैं करने में सक्षम था:

<a class="ea-link" href="javascript:void(0)" href="/export/">Export</a>

Comments

यह अमान्य HTML है, जैसा कि stackoverflow.com/q/26341507/1709587 पर वर्णित है । यदि आपकी प्रेरणा सिर्फ अपने स्रोत कोड में href को बनाए रखने की है, तो इसे पुनर्स्थापित करने के लिए बाद में अपने स्रोत को संपादित करना आसान है, ऐसा करने के तरीके हैं जो किसी टिप्पणी का उपयोग करने की तरह, युक्ति का उल्लंघन नहीं करते हैं। मैं ऐसा करने के लिए एक ठोस कारण के बिना इस तरह से अवैध HTML लिखने के खिलाफ सिफारिश करेंगे।

— मार्क एमी

Answer 28

वेरिएंट जो मुझे सूट करता है:

<script>
  function locker(){
    if ($("a").hasClass("locked")) {
         $("a").removeClass('locked').addClass('unlocked');
         $("a").attr("onClick","return false");
    } else {
         $("a").css("onclick","true");
         $("a").removeClass('unlocked').addClass('locked');
         $("a").attr("onClick","");
    }
  }
</script>

<button onclick="locker()">unlock</button>

<a href="http://some.site.com" class="locked">
  <div> 
      .... 
  <div>
</a>

Answer 29

<a href="/" disabled="true" onclick="return false">123</a>

बस जोड़ना: यह सामान्य रूप से काम करता है, हालांकि यह काम नहीं करेगा यदि उपयोगकर्ता ने ब्राउज़र में जावास्क्रिप्ट को अक्षम कर दिया है।

1) आप वैकल्पिक रूप से बूटस्ट्रैप 3 वर्ग का उपयोग अपने एंकर टैग पर href टैग को निष्क्रिय करने के लिए कर सकते हैं, बूटस्ट्रैप 3 बॉक्स को एकीकृत करने के बाद

<a href="/" class="btn btn-primary disabled">123n</a>

या

2) ब्राउज़रों में html या js का उपयोग करके जावास्क्रिप्ट को सक्षम करने का तरीका जानें। या वेबसाइट का उपयोग करने से पहले जावास्क्रिप्ट का उपयोग करने के लिए एक पॉप-अप उपयोगकर्ता को बताएं