एक HTML लिंक बनाएं जो कुछ भी नहीं करता है (शाब्दिक रूप से कुछ भी नहीं)

Question

मुझे एक लिंक चाहिए जो कुछ भी नहीं करता है। मैं यह नहीं चाहता:

<a href="#">

क्योंकि तब URL बन जाता है something.com/whatever/#।

एकमात्र कारण मुझे एक लिंक चाहिए ताकि उपयोगकर्ता यह देख सके कि वे पाठ पर क्लिक कर सकते हैं। जावास्क्रिप्ट का उपयोग कुछ कार्रवाई करने के लिए किया जा रहा है, इसलिए मुझे कहीं भी जाने के लिए लिंक की आवश्यकता नहीं है, लेकिन मुझे लिंक की तरह दिखने की आवश्यकता है!

मैं कुछ डेटा विशेषता का उपयोग कर सकता हूं और मुझे बता सकता है कि सीएसएस तत्वों को लिंक की तरह दिखते हैं यदि उनके पास यह विशेषता है लेकिन यह थोड़ा अधिक लगता है।

Comments

इसमें गलत क्या है something.com/whatever/#?

— चार्ल्स स्प्रेबेरी

आप इसे रिक्त का एक href दे सकते हैं और जावास्क्रिप्ट में गलत लौटा सकते हैं। लेकिन अगर आप सिर्फ pointerअपने CSS

— JohnP

@CharlesSprayberry: ऐसी परिस्थितियाँ हैं जो आप नहीं चाहते हैं।

— PeeHaa

यह ux.stackexchange.com पर भी पूछने के लिए एक अच्छा प्रश्न होगा ।

इस सवाल पर यहां अधिक गहराई से चर्चा की गई है: stackoverflow.com/questions/134845/…

— DawnPaladin

Answer 1

निम्नलिखित आपके href को चलने से रोकेगा

<a href="#" onclick="return false;">

यदि आप jQuery का उपयोग कर रहे हैं, का उपयोग event.preventDefault()किया जा सकता है

Comments

रद्द करने के लिए अतिरिक्त ऑनक्लिक घटनाओं का कारण बनता है।

— रौली राजन्दे

पृष्ठ को शीर्ष पर स्क्रॉल करने का कारण बनता है।

— डेविड हेमपी

@DavidHempy मुझे यह अनुभव नहीं है। कौन सा ब्राउज़र?

— कर्ट

@curt Google Chrome संस्करण 63.0.3239.84 (आधिकारिक बिल्ड) (64-बिट) (या संभवतः दो सप्ताह पहले थोड़ा पुराना संस्करण)

— डेविड हेम्पी

यह वर्डप्रेस प्लगइन स्क्रॉल टू आईडी और लिंक के लिए काम नहीं करेगा फिर भी लिंक कुछ करेगा। इस मामले में, यह छोटी बात होगी जो आपको पृष्ठ के शीर्ष पर पुनर्निर्देशित करेगी।

— जिरी ओटौपाल イ pal pal pal pal

Answer 2

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

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

Comments

+1 लेकिन त्वरित प्रश्न: क्या इसमें javascript:voidऔर के बीच अंतर है javascript:void(0)?

— एडम रैकिस

यदि आप जावास्क्रिप्ट का उपयोग करने की कोशिश करेंगे: शून्य (0) परम के बिना आपके पास सिंटेक्सएरर होगा और आपकी सभी स्क्रिप्ट विफल हो जाएंगी।

— एलेडसेट्स

@alexdets SyntaxError javascript:void()होगी, लेकिन javascript:voidबस अपरिभाषित रिटर्न - के रूप में ही void(0)। एडम, जहां तक ​​मैं बता सकता हूं, voidऔर void(0)इस उपयोग के लिए कार्यात्मक रूप से समकक्ष हैं। --- संपादित करें: हालांकि मैं अन्य टिप्पणियों को देखता हूं जो संकेत दे सकते हैं कि यह पृष्ठ को फिर से लोड कर सकता है ..

— -ytuba

इससे कोई फर्क नहीं पड़ता कि आपने javaScript / javascript / JavaScript / Javascript को कैसे कैपिटल किया है?

— टिम ट्रस्टन

@TechyTimo कोई पूंजीकरण मायने नहीं रखता, वास्तव में इसे पूंजीकृत नहीं किया जाना चाहिए। मैंने एक संपादन प्रस्तुत किया है।

— वेस्टन गैंगर

Answer 3

HTML5 में, यह बहुत सरल है। बस hrefविशेषता को छोड़ दें ।

<a>Do Nothing</a>

एक टैग href विशेषता पर MDN से :

href

यह हाइपरटेक्स्ट स्रोत लिंक को परिभाषित करने वाले एंकरों के लिए एकल आवश्यक विशेषता थी, लेकिन अब HTML5 में आवश्यक नहीं है।

होवर पर हैंड कर्सर के बारे में क्या?

ब्राउज़र के लिए डिफ़ॉल्ट शैलियाँ कर्सर को पॉइंटर में नहीं बदल सकती हैं, aबिना टैग वाले href। आप निम्न सीएसएस के साथ इसे बदल सकते हैं।

a {
    cursor: pointer;
}

<a>Do Nothing</a>

हालांकि, इसके बारे में अधिक-चयनात्मक होना बेहतर है, और इसे केवल उन तत्वों पर लागू करें जिन्हें आप ईवेंट हैंडलर जोड़ने का इरादा रखते हैं।

टैब को फोकस करने योग्य बनाने के बारे में क्या?

बस tabindex="0"तत्व में जोड़ें ।

<a tabindex="0">Do Nothing</a>

क्या यह उपयोग करने के लिए समझ में आता है a एक लिंक के बिना एक टैग ?

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

Comments

बूटस्ट्रैप 4 के साथ, लिंक जिनके पास href नहीं है वे लिंक के रूप में स्टाइल नहीं करते हैं।

— user3413723

Answer 4

इसे लिंक न करें (हालाँकि इसे करना पसंद किया जाता है) और इसे सीएसएस के साथ स्टाइल करें ताकि यह लिंक जैसा लगे:

p.not-a-link { text-decoration: underline; cursor: pointer } 

या इससे भी बेहतर बस इसे एक लिंक बनाएं और जावास्क्रिप्ट फ़ंक्शन को दें जो e.preventDefault()लिंक को रोकने के लिए उपयोग किया जाता है।

लिंक को भी जोड़ें hrefताकि जेएस सक्षम के बिना उपयोगकर्ता अभी भी इसका उपयोग कर सकेंगे (एक कमबैक के रूप में)।

Comments

+1 IE5.5 के साथ बहस का समापन, एपी से बेहतर होगा?

— एमेल्विन

मुझे स्पैन पसंद है। P एक नई पंक्ति बना सकता है, जबकि स्पैन नहीं

— रोनी ऊस्टिंग

Answer 5

<a href="javascript:;">Link text</a> - यही मैं आमतौर पर उपयोग करता हूं

Comments

क्या यह पृष्ठ को कुछ ब्राउज़रों के साथ पुनः लोड नहीं करेगा?

— कर्ट

@ कर्ट: आप सही हैं, गलत सवाल पढ़ें। आपको इसके बारे में टिप्पणी मिली है :-)

— स्कॉट ब्राउन

... और मैं इसे नीचे संपादित करने के बाद एक सहित 2 downvotes मिल गया है! कठोर!

— स्कॉट ब्राउन

पहला कोड निकालें, फिर मुझे अपना डाउन वोट निकालने दिया जाएगा :) यह मुझे डाउनवोट को हटाने नहीं देगा, इसका "लॉक"

— कर्ट

कौन से ब्राउज़र इसे प्रभावित करते हैं, क्या यह अभी भी एक मुद्दा है? इसे प्राथमिकता दी जाएगी void(0), क्योंकि यह स्टेटस बार में सामने आया है। मैं कहता हूं कि क्योंकि मैंने उपयोगकर्ताओं को इसे बग / त्रुटि के रूप में चिह्नित किया है (जो कि यह स्पष्ट रूप से नहीं है), इसलिए मुझे लगता है कि यह टी उनके लिए भ्रामक है।

— chunk_split

Answer 6

हम यह प्राप्त कर सकते हैं कि जावास्क्रिप्ट शून्य का उपयोग करना जिसमें आम तौर पर एक अभिव्यक्ति का मूल्यांकन शामिल होता है और अपरिभाषित लौटता है, जिसमें जोड़ना भी शामिल है javascript:void(0); href पर ।

शून्य ऑपरेटर आमतौर पर केवल एक अपरिभाषित आदिम मूल्य प्राप्त करने के लिए उपयोग किया जाता है, आमतौर पर "शून्य (0)" (जो "शून्य 0" के बराबर है) का उपयोग कर रहा है। इन मामलों में, इसके बजाय वैश्विक चर अपरिभाषित का उपयोग किया जा सकता है (यह मानते हुए कि इसे गैर-डिफ़ॉल्ट मान को नहीं सौंपा गया है)।

a {
  text-decoration: initial;
}

<a href="javascript:void(0);"> This link actually does nothing when clicked</a>

Answer 7

@ कर्ट का जवाब काम करेगा, लेकिन आप सीएसएस में एक कर्सर शैली का उपयोग कर सकते हैं ताकि यह एक फर्जी लिंक जनरेट किए बिना परेशान की तरह दिखे। ब्राउज़र अनुरूपता के आधार पर हाथ या सूचक का उपयोग करें।

क्रॉस ब्राउज़र कन्फ़र्मेंट पॉइंटर css ( कर्सर स्टाइल गाइड से):

element {
    cursor: pointer;
    cursor: hand;
}

Comments

@PeeHaa केवल पॉइंटर का उपयोग करें यदि आप इसे IE5.5 और पहले काम नहीं करना चाहते हैं!

— हेल्विन

कि मैं क्या कहा! कृपया IE5.5 का उल्लेख न करें: P अधिक गंभीर नोट पर IE5.5 शेयर है 0.17%। अगर लोग अभी भी उस संस्करण पर हैं, तो वे वेब को ब्राउज़ करने के लायक नहीं हैं

— PeeHaa

Answer 8

एक तरीका जिसका किसी ने उल्लेख नहीं किया है वह है href को किसी रिक्त स्थानीय फ़ाइल स्थान पर इंगित करना

<a href='\\'>my dead link</a>

क्यों? यदि आप प्रतिक्रिया या कोणीय जैसे ढांचे का उपयोग करते हैं, तो संकलक कुछ चेतावनियों को थूक देगा जो आपके लॉग या कंसोल को गंदा कर सकता है। यह तकनीक रोबोट या मकड़ियों को गलत तरीके से जोड़ने वाली चीजों से भी रोकेगी।

Answer 9

इसका उपयोग न करें <a>... इसके बजाय उपयोग करें <span class='style-like-link'> और फिर वर्ग का उपयोग करें ताकि आप इसे चाहें।

Comments

एक लिंक के बिना एक एंकर टैग का उपयोग करने के साथ कुछ भी गलत नहीं है, यह उल्लेख करने के लिए नहीं कि ऐसे कई मामले हैं जहां यह ऐसा करने के लिए बहुत अधिक समझ में आता है, बजाय इसे छद्म-एंकर टैग के साथ बदलने के लिए। एक दूसरे की तरह दिखने के लिए एक तत्व को स्टाइल करने का उल्लेख नहीं है, लेकिन इसे अलग तरह से लागू किया जाना भविष्य में मुख्य मुद्दे का कारण बनता है

— टिम

माना। यह पूरी तरह से उपयोग के मामले पर निर्भर करता है और जिसे आप पूरा करने की कोशिश कर रहे हैं। मैंने इसे केवल एक उत्तर के रूप में प्रदान किया ताकि दूसरों को यह पता चले कि यह एक विकल्प है।

— ब्राइस

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

— टिम