क्या सीएसएस का उपयोग करके HTML एंकर टैग क्लिक करने योग्य / लिंक करने योग्य नहीं है?

Question

उदाहरण के लिए अगर मेरे पास यह है:

<a style="" href="page.html">page link</a>

क्या शैली की विशेषता के लिए मैं कुछ भी उपयोग कर सकता हूं जो इसे बना देगा इसलिए लिंक क्लिक करने योग्य नहीं है और मुझे पेज.html पर नहीं ले जाएगा?

या, क्या एंकर टैग में 'पेज लिंक' को न लपेटना मेरा एकमात्र विकल्प है?

संपादित करें: मैं यह बताना चाहता हूं कि मैं ऐसा क्यों करना चाहता हूं ताकि लोग बेहतर सलाह दे सकें। मैं अपना एप्लिकेशन सेट करने का प्रयास कर रहा हूं ताकि डेवलपर यह चुन सके कि उसे किस प्रकार की नेविगेशन शैली चाहिए।

इसलिए, मेरे पास लिंक की एक सूची है और एक हमेशा वर्तमान में चयनित है और अन्य सभी नहीं हैं। उन लिंक के लिए जो चयनित नहीं हैं, मैं स्पष्ट रूप से उन सामान्य क्लिक करने योग्य एंकर टैग चाहता हूं। लेकिन चयनित लिंक के लिए, कुछ लोग पसंद करते हैं कि लिंक क्लिक करने योग्य बना रहे, जबकि अन्य इसे क्लिक करने योग्य नहीं बनाना चाहते हैं।

अब मैं आसानी से केवल प्रोग्रामेटिक रूप से चयनित लिंक के आसपास एंकर टैग नहीं लपेट सकता। लेकिन मुझे लगता है कि यह अधिक सुरुचिपूर्ण होगा यदि मैं हमेशा चयनित लिंक को किसी चीज़ में लपेट सकता हूं:

<a id="current" href="link.html">link</a>

और फिर डेवलपर को सीएसएस के माध्यम से लिंकिंग शैली को नियंत्रित करने दें।

Comments

stackoverflow.com/questions/2091168/disable-a-link-using-css

— ब्रायन

यदि आप इसे क्लिक नहीं करना चाहते हैं, तो शायद <span>इसके बजाय उपयोग करें ?

— डेविड का कहना है कि मोनिका

मुझे डेविड से सहमत होना होगा। UI प्रतिमानों को न तोड़ें। एक उपयोगकर्ता की उम्मीद है कि लिंक पर क्लिक किया जा सकता है। अगर इसे क्लिक नहीं किया जा सकता है तो इसका वास्तव में लिंक नहीं है?

— म्रतशर्मन

कुछ और संभावित उत्तरों के लिए stackoverflow.com/questions/2091168/disable-a-link-use-css देखें ।

— ओलिवर

हाँ, यह एक भयानक विचार है। स्क्रीन रीडर अभी भी लिंक को लिंक के रूप में देखेंगे, क्योंकि यह एक लिंक है। खोज इंजन भी। वास्तव में, कुछ भी जो HTML को समझता है। यह मत करो। इसके बारे में "सुरुचिपूर्ण" कुछ भी नहीं है।

— पॉल डी। वेट

Answer 1

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

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

और फिर अपने html कोड को क्लास असाइन करें:

<a style="" href="page.html" class="inactiveLink">page link</a>

यह लिंक को क्लिक करने योग्य नहीं बनाता है और कर्सर एक तीर की शैली है, न कि लिंक के रूप में एक हाथ।

या html में इस शैली का उपयोग करें:

<a style="pointer-events: none; cursor: default;" href="page.html">page link</a>

लेकिन मैं पहले दृष्टिकोण का सुझाव देता हूं।

Comments

मैं फ़ायरफ़ॉक्स / क्रोम के Ubuntu संस्करण पर इस काम की पुष्टि कर सकता हूं। आश्चर्य है कि अगर यह विंडोज पर IE पर काम करने जा रहा है।

— जॉनमेर्लिनो

इस समाधान में महत्वपूर्ण है: pointer-events। यहाँ संगतता-तालिका के लिए लिंक

— masegaloeh

@ जॉनमोर्लिनो: IE9 में काम नहीं करता है। संगतता तालिका में मसेगलोहे के लिंक पर अधिक देखें

— होवी

कैविएट: फोकस को लिंक पर स्थानांतरित करने के लिए टैबिंग और लिंक को सक्रिय करने के लिए एंटर का उपयोग करना अभी भी काम करेगा

— wtho

मुझे नहीं लगता कि कर्सर: डिफ़ॉल्ट आवश्यक है। जब तक आपके पास सूचक-घटनाएँ हैं: कोई भी नहीं, जो काम करता है।

— कालोदयंत

Answer 2

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

<a href="page.html" onclick="return false">page link</a>

Comments

@ यह एक क्लिक कुछ भी नहीं करते हैं, लेकिन बटन अभी भी क्लिक करने योग्य दिखता है।

— एकॉस्टैच

@acostache शैली का उपयोग करके = "कर्सर: डिफ़ॉल्ट?" सूचक के साथ मदद करनी चाहिए

— जॉन

सवाल था: "सीएसएस का उपयोग करना", इसलिए यह एक अच्छा है, लेकिन सही जवाब नहीं है।

— रोमन होल्ज़नर

3 मुख्य कारणों के लिए onclick = "false false" के बजाय css का उपयोग करना बेहतर है: 1- css से आप डिफ़ॉल्ट लिंक माउस कर्सर को डिफ़ॉल्ट तीर में बदल सकते हैं। २- वह ओब्स्ट्रक्टिव जेएस है। 3- यह वास्तव में एक मूल्य वापस कर रहा है, आप लिंक पर क्लिक करने पर हर बार गलत नहीं लौटना चाहते हैं।

— डिएगो उन्नाव

Answer 3

हाँ .. यह सीएसएस का उपयोग संभव है

<a class="disable-me" href="page.html">page link</a>

.disable-me {
    pointer-events: none;
}

Comments

यह सबसे साफ तरीका है, लेकिन एक चेतावनी: यह केवल IE11 + caniuse.com

— pixelfreak

Answer 4

या विशुद्ध रूप से HTML और सीएसएस बिना किसी घटना के:

<div style="z-index: 1; position: absolute;">
    <a style="visibility: hidden;">Page link</a>
</div>
<a href="page.html">Page link</a>

Comments

-1 क्योंकि यह समस्या को हल करने के लिए एक बहुत जटिल / भ्रमित तरीका है। यह वास्तव में वह भी नहीं करता है जो सवाल पूछता है (लिंक को निष्क्रिय करें)। यह सिर्फ एक अदृश्य तत्व के साथ लिंक को कवर करता है। डिएगो का जवाब बहुत साफ है।

— विकसित करना

@ इससे उलट मुझे लगता है कि डिएगो का जवाब भी बेहतर है और उसे उच्चतर वोट दिया जाना चाहिए। हालाँकि, जब मैंने यह उत्तर (3 साल पहले) लिखा pointer-eventsथा तो लगभग कोई ब्राउज़र समर्थन नहीं था।

— पॉल

@Paulpro मुझे लगा कि मामला था। नीचे के लिए क्षमा करें! बस यह सुनिश्चित करना चाहते हैं कि शीर्ष पर तारीख का जवाब सबसे ऊपर है। जवाब देने के लिए धन्यवाद।

— विकास करना

Answer 5

सीएसएस को प्रस्तुति को प्रभावित करने के लिए डिज़ाइन किया गया था, न कि व्यवहार को।

आप कुछ जावास्क्रिप्ट का उपयोग कर सकते हैं।

document.links[0].onclick = function(event) {
   event.preventDefault();
};

Answer 6

एक और अधिक अप्रतिबंधित तरीका (यह मानते हुए कि आप jQuery का उपयोग करते हैं):

HTML:

<a id="my-link" href="page.html">page link</a>

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

$('#my-link').click(function(e)
{
    e.preventDefault();
});

इसका लाभ तर्क और प्रस्तुति के बीच का स्वच्छ अलगाव है। यदि एक दिन आप तय करते हैं कि यह लिंक कुछ और होगा, तो आपको मार्कअप के साथ गड़बड़ नहीं करना है, बस JS।

Comments

तुम्हें पता है कि आप आसानी से एक ही काम करने के लिए गैर jQuery कोड लिख सकते हैं कि काफी तेजी से चलेंगे: document.getElementById('my-link').onclick = function(){ return false; };

— पॉल

मुझे लगता है कि अधिकांश लोग चाहते हैं (और चाहिए) विकास को आसान बनाने के लिए किसी प्रकार के ढांचे का उपयोग करें। लेखक ने किसी भी प्रदर्शन प्रतिबंध को निर्दिष्ट नहीं किया है, लेकिन jQuery का छोटा और gzipped केवल 31KB है। मुझे लगता है कि लाभ लागत को दूर करता है।

— पिक्सफ्रीक

गंभीरता से? क्या ब्राउज़र onclick या getElementById का समर्थन नहीं करता है। ठीक है, इसलिए IE 2 onclick का समर्थन नहीं करता है, लेकिन यह CSS का समर्थन नहीं करता है ... और मुझे अत्यधिक संदेह है कि आपका jQuery कोड IE 2 में भी काम करेगा।

— पॉल

गति अंतर छोटा हो सकता है, bt नहीं अगर आप jQuery लाइब्रेरी डाउनलोड समय नहीं कर सकते हैं। मुझे नहीं लगता कि जब आपको आवश्यकता न हो तो jQuery के उपयोग को प्रोत्साहित करना एक अच्छा विचार है, क्योंकि लोग इस पर निर्भर हो जाते हैं और इसके बिना जावास्क्रिप्ट लिखना भूल जाते हैं।

— पॉल

@PaulPRO यह चर्चा लेखक की आवश्यकताओं के बिना मूक है। प्रत्येक रूपरेखा का अपना उद्देश्य है। यदि वह जेएस में धाराप्रवाह नहीं है और सिर्फ एक माँ-एन-पॉप वेबसाइट कर रहा है और कुछ डोम तत्व को हेरफेर करने की आवश्यकता है, तो उसके लिए एक रूपरेखा का उपयोग करना बहुत आसान होगा। किसी भी ढांचे का उपयोग करने में आपकी अनिच्छा हास्यास्पद है। PHP को C. में लिखा गया है। क्या इसका मतलब है कि आपको C लिखना चाहिए और PHP का उपयोग नहीं करना चाहिए? iOS में UIKit, Core Data, Quartz आदि है। फ्लैश में सामान्य रूप से इस्तेमाल की जाने वाली 3 पार्टी लाइब्रेरी हैं। फिर से, प्रत्येक रूपरेखा का अपना उद्देश्य है। एक शुद्धतावादी, बिल्ट-इन-इन-हाउस मानसिकता कोई मदद नहीं करेगा।

— पिक्सफ्रीक

Answer 7

उत्तर है:

<a href="page.html" onclick="return false">page link</a>

Answer 8

यह सीएसएस में किया जा सकता है और यह बहुत सरल है। "a" को "p" में बदलें। आपका "पेज लिंक" कहीं भी नेतृत्व नहीं करता है यदि आप इसे अस्पष्ट बनाना चाहते हैं।

जब आप अपने सीएसएस को इस विशिष्ट "पी" पर एक होवर कार्रवाई करने के लिए कहते हैं, तो इसे यह बताएं:

(इस उदाहरण के लिए मैंने "p" को "उदाहरण" ID दिया है)

#example
{
  cursor:default;
}

अब आपका कर्सर वैसा ही रहेगा जैसा वह पूरे पेज पर है।

Answer 9

<a href="page.html" onclick="return false" style="cursor:default;">page link</a>

Comments

इसके लिए एक अलग उत्तर जोड़ने की आवश्यकता नहीं है, @KranK द्वारा उत्तर पर आपकी टिप्पणी पर्याप्त है, विचार। कृपया डुप्लिकेट उत्तर से बचें।

— मचिट्ठार्ग