एंकर टैग को कुछ भी नहीं करने के लिए कैसे करें?

Question

मैं jQuery का उपयोग करता हूं, मुझे कुछ एंकर टैग बनाने की आवश्यकता है जो कोई कार्रवाई नहीं करते हैं।

मैं आमतौर पर इसे इस तरह लिखता हूं:

<a href="#">link</a>

हालाँकि यह पृष्ठ के शीर्ष भाग को संदर्भित करता है!

Comments

क्योंकि jQuery क्लिक करें घटना संभाल लेंगे तो मैं लिंक एक achor लिंक लेकिन एक JavaScript फ़ंक्शन की तरह व्यवहार की तरह बनना चाहता हूँ

— अहमद

प्रभावी

— द्वैध

जैसा कि नीचे दिए गए उत्तरों में से एक में उल्लेख किया गया है: यदि आप किसी संसाधन को इंगित करने के लिए लिंक नहीं चाहते हैं, तो ए तत्व का उपयोग न करें।

— मैथियास ब्येनेंस

इसमें hrefविशेषता का उपयोग न करें ।

— vsync

जावास्क्रिप्ट लिंक के लिए Href विशेषता

— ओरिऑल

Answer 1

यदि आप इसे किसी भी बात के लिए नहीं करना चाहते हैं, तो आपको संभवतः <a>(एंकर) टैग का उपयोग नहीं करना चाहिए ।

यदि आप एक लिंक की तरह कुछ देखना चाहते हैं, लेकिन लिंक की तरह काम नहीं करते हैं, तो उपयुक्त तत्व (जैसे <span>) का उपयोग करना सबसे अच्छा है और फिर CSS का उपयोग करके इसे स्टाइल करें:

<span class="fake-link" id="fake-link-1">Am I a link?</span>

.fake-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

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

$('#fake-link-1').click(function() {
    /* put your code here */
});

Comments

इसमें एक समस्या है: यह टैब-नेविगेशन की अनुमति नहीं देता है।

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

— फ्रेड्रिक मोर्क

साथ ही एक एक्सेसिबिलिटी की समस्या। आप इसे एक बटन तत्व का उपयोग करके हल कर सकते हैं (जावास्क्रिप्ट से उत्पन्न गैर-जेएस उपयोगकर्ताओं को एक टूटा हुआ नियंत्रण नहीं मिलता है)।

— क्वेंटिन

यहां इसके लिए एक त्वरित सुधार है: एक गैर-लिंक तत्व पर tabindex = "0" अधिकांश आधुनिक ब्राउज़रों में कीबोर्ड नेविगेशन सक्षम करेगा।

— माथियास बायनेंस

एक और 'समस्या' यह है कि आप CSS नहीं: hover pseudo class उन तत्वों पर काम नहीं करेंगे जो IE6 में लिंक नहीं हैं। लेकिन जब से आप इन तत्वों को जावास्क्रिप्ट के माध्यम से वैसे भी जोड़ रहे हैं (कम से कम, आपको चाहिए), आप बस एक स्क्रिप्ट लिख सकते हैं जो होवर किए जाने पर तत्व में एक .hover वर्ग जोड़ता है।

— मैथियास ब्येनेंस

Answer 2

सही समाधान की तुलना में कुछ कम हैं:

1. एक नकली एंकर से लिंक

<a href="#">

समस्या: लिंक पर क्लिक करने से पृष्ठ के शीर्ष पर वापस कूदता है

2. 'a' के अलावा अन्य टैग का उपयोग करना

एक स्पैन टैग का उपयोग करें और क्लिक को संभालने के लिए jquery का उपयोग करें

समस्या: कीबोर्ड नेविगेशन को तोड़ता है, होवर कर्सर को मैन्युअल रूप से बदलना होगा

3. एक जावास्क्रिप्ट शून्य फ़ंक्शन से लिंक

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

समस्या: IE में छवियों को जोड़ने पर विराम

उपाय

चूँकि इन सभी की समस्याएँ हैं, इसलिए मैंने जो समाधान किया है वह एक नकली लंगर से जुड़ा है, और फिर onClick से झूठी वापसी करें:

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

समाधानों का सबसे संक्षिप्त नहीं, लेकिन यह उपरोक्त विधियों के साथ सभी समस्याओं को हल करता है।

Comments

मैं आमतौर पर जावास्क्रिप्ट का उपयोग करता हूं: शून्य (0); दृष्टिकोण, क्योंकि # माउस के ऊपर फ़ायरफ़ॉक्स बार में वर्तमान URL को # प्रदर्शित करता है, जो उपयोगकर्ता के लिए भ्रामक हो सकता है।

— लूसफेर्रियो

breaks when linking images in IEइसका क्या मतलब है?

— यूजीन

@ यूजीन यह प्रश्न अब 3 साल पुराना है, लेकिन IE एक शून्य फ़ंक्शन के लिंक से घिरा होने पर छवियों को गायब करने के लिए उपयोग किया जाता है। निश्चित नहीं है कि यह कब तय किया गया था, लेकिन यह IE10 में काम करता है, जो कि मैंने स्थापित किया है। मैं अब व्यक्तिगत रूप से उपयोग करता हूं<a href="javascript:;">

— zaius

मैंने वहाँ टिप्पणियों का भी उपयोग किया है: <a href="javascript:void(0); // गुण पैलेट दिखाएँ </a>। इस तरह, जब उपयोगकर्ता होवर करते हैं, तो वे उस टिप्पणी को देखते हैं जो उन्हें संकेत दे सकती है कि उन्हें क्लिक करने पर क्या उम्मीद करनी चाहिए। (हालाँकि आप एक टूलटिप का भी इस्तेमाल कर सकते हैं।)

— रॉबिन ज़िमरमन

ऐसा लगता है कि href="javascript:"यह भी पर्याप्त है और नवीनतम प्रमुख ब्राउज़रों में काम करता है। अर्धविराम की कोई आवश्यकता नहीं, वास्तव में PhpStorm भी इसे हटाने का सुझाव देता है।

— jlh

Answer 3

इसे कुछ भी नहीं करने के लिए, इसका उपयोग करें:

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

Comments

या बस <a href="javascript:;">। पुनश्च साथ काम नहीं करता target=_blankहै, हालांकि

— एलेक्स

Answer 4

इसे संभालने का सही तरीका यह है कि जब आप लिंक को हैंडल करें तो jQuery के साथ लिंक को "ब्रेक" करें

एचटीएमएल

<a href="#" id="theLink">My Link</a>

जे एस

$('#theLink').click(function(ev){
    // do whatever you want here

    ev.preventDefault();
    ev.stopPropagation();
});

वे अंतिम दो कॉल क्लिक की व्याख्या करने वाले ब्राउज़र को रोकते हैं।

Comments

हालांकि ऐसा लगता है कि यह "उचित" है, क्योंकि यह ईवेंट बुदबुदाहट को रोकता है, "वापसी असत्य" बहुत कम क्रिया है और वही काम करता है। केवल एक बार आप ऐसा करना चाहते हैं, यदि आपके पास पहले से ही ईवेंट हैंडलर्स हैं जो कि jQuery के माध्यम से लिंक पर क्लिक करने के लिए पंजीकृत हैं।

— aleemb

Answer 5

इसे करने के लिए बहुत सारे तरीके हैं

न जोड़ें और hrefविशेषता

<a name="here"> Test <a>

आप जैसे href के बजाय onclick इवेंट को जोड़ सकते हैं

<a name="here" onclick="YourFunction()"> Test <a>

या आप इस तरह से शून्य फ़ंक्शन जोड़ सकते हैं जो सबसे अच्छा तरीका होगा

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

Comments

नाम विशेषता की आवश्यकता है?

— पेट्रस थेरॉन

@PetrusTheron आवश्यक नहीं है। ।

— पुनीत गज्जर

यह एक नकल बंद पूर्व मौजूदा उत्तरों की है

— aross

अपने एंकर टैग की शैली को सेट करने के लिए मत भूलना यदि आप hrefविशेषता को हटा देते हैं क्योंकि यह अब हाइपरलिंक की तरह व्यवहार नहीं करेगा (भले ही ऑन्ग्लिक अभी भी काम करता है) आपको सामान cursor: pointer;और :hoverचयनकर्ता को रीसेट करना होगा ।

— दोपहर

@ पर्टैक करेक्ट .. ध्यान देने के लिए धन्यवाद

— पुनीत गज्जर

Answer 6

क्या आप कुछ भी नहीं मतलब है?

<a href='about:blank'>blank page</a>

या

<a href='whatever' onclick='return false;'>won't navigate</a>

Comments

सहमत - बस अपने jQuery विधि और

— वॉयला

Answer 7

मुझे लगता है कि आप कोशिश कर सकते हैं

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

मैं यहाँ पर जो एकमात्र कैच देख रहा हूँ वह उच्च स्तरीय ब्राउज़र सुरक्षा है जिसे जावास्क्रिप्ट निष्पादित करने पर संकेत दिया जा सकता है।

हालांकि यह एक आसान तरीका है

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

यह संयम से इस्तेमाल किया जाना चाहिए

कुछ बिंदुओं के लिए यह लेख पढ़ें https://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void

Comments

सही उत्तर, टैब नेविगेशन की अनुमति देता है।

— के - एसओ में विषाक्तता बढ़ रही है।

Answer 8

नए वेब मानकों (HTML5) को प्रतिबिंबित करने के लिए इस उत्तर को अपडेट किया जाना चाहिए।

यह:

<a tabindex="0">This represents a placeholder hyperlink</a>

... मान्य HTML5 है। टैबइंडेक्स विशेषता इसे सामान्य हाइपरलिंक की तरह कीबोर्ड को ध्यान देने योग्य बनाती है। आप spanपहले बताए गए अनुसार इसके लिए तत्व का उपयोग कर सकते हैं , लेकिन मैं इसका उपयोग करता हूंa तत्व तत्व अधिक सुरुचिपूर्ण है।

देखें: https://w3c.github.io/html-reference/a.html
और: https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-href

Comments

यह HTML4 भी मान्य है, लेकिन यह एंकर को एक कड़ी के रूप में प्रस्तुत नहीं करेगा।

— अंतरजाल

मुझे नहीं पता था कि यह वैध HTML4 था, लेकिन HTML5 युक्ति स्पष्ट रूप से उपयोग-केस का उल्लेख करता है। और जो शैलियों href विशेषता को लक्षित नहीं करती हैं वे ठीक काम करेंगी, बस डिफ़ॉल्ट ब्राउज़र शैलियाँ एक मुद्दा हो सकती हैं।

— 15

clickजब उपयोगकर्ता तत्व को केंद्रित करता है और एंटर दबाता है (फ़ायरफ़ॉक्स 51 में परीक्षण किया जाता है) तो यह भी ट्रिगर नहीं होता है ।

— टोरविन

@torvin, यह आसान है। keydownघटना का उपयोग करें ।

— aross

snazzy quirk, लेकिन विंडो 10 में यह तत्व के चारों ओर एक

— बॉर्डर वाला

Answer 9

यहां <a>टैग की hrefटैग प्रॉपर्टी के लिए तीन तरीके बताए गए हैं:

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

<a href="javascript:;">link</a >

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

Comments

इस का सिर्फ डुप्लिकेट है वर्तमान में उच्चतम जवाब मतदान , लेकिन कम जानकारी के साथ

— aross

Answer 10

मुझे पता है कि यह एक पुराना सवाल है, लेकिन मुझे लगा कि मैं अपने दो सेंटों को और जोड़ूंगा:

यह इस बात पर निर्भर करता है कि लिंक क्या करने जा रहा है, लेकिन आमतौर पर, मैं एक url पर लिंक को इंगित करता हूं जो संभवतः प्रदर्शित कर सकता है / वही काम कर सकता है, उदाहरण के लिए, यदि आप बॉक्स पॉप अप के बारे में थोड़ा कर रहे हैं:

<a id="about" href="/about">About</a>

फिर jQuery के साथ

$('#about').click(function(e) {
    $('#aboutbox').show();
    e.preventDefault();
});

इस तरह, बहुत पुराने ब्राउज़र (या जावास्क्रिप्ट अक्षम के साथ ब्राउज़र) अभी भी पृष्ठ के बारे में एक अलग नेविगेट कर सकते हैं, लेकिन इससे भी महत्वपूर्ण बात यह है कि Google इसे भी उठाएगा और लगभग पृष्ठ की सामग्री को क्रॉल करेगा।

Answer 11

सुनिश्चित करें कि आपके सभी लिंक जिन्हें आप रोकना चाहते हैं href="#!"(या कुछ भी आप चाहते हैं, वास्तव में), और फिर इसका उपयोग करें:

jq('body').on('click.stop_link', 'a[href="#!"]',
function(event) {
     event.preventDefault();
});

Answer 12

आपके पास aबिना hrefविशेषता के HTML एंकर ( टैग) हो सकता है। hrefविशेषता छोड़ें और यह किसी भी चीज़ से लिंक नहीं होगा:

<a>link</a>

Comments

धन्यवाद! इसने मेरे मामले के लिए पूरी तरह से काम किया। जहाँ मैं URL होने पर नए टैब में खोलने के लिए एंकर टैग रखना चाहता था, लेकिन URL नहीं होने पर कुछ भी नहीं। # के मामले में यह एक CLICK को स्वीकार कर रहा था और इसे पृष्ठ के शीर्ष पर ले जा रहा था। जैसा कि आपने सुझाव दिया है, कोई href भाग नहीं है। इसने इस मुद्दे को हल कर दिया! एक टैग के कारण स्वरूपण बहुत अच्छा लगता है, कोई href नहीं के साथ चला गया मुद्दा क्लिक करें। धन्यवाद!!!

— मोहसिन

यदि कोई अन्य व्यक्ति सोच रहा है कि यह HTML5 मान्य है, तो इसका उत्तर YES :) stackoverflow.com/a/33046203/5303892 है । यहां मानक पृष्ठ से उदाहरण देखें (3rd li आइटम देखें): <nav> <ul> <li> <a href="https://stackoverflow.com/"> होम </a> </ li> <li> <a href = "/ समाचार "> समाचार </a> </ li> <li> <a> उदाहरण </a> </ li> <li> <a href="https://stackoverflow.com/legal"> कानूनी </a> </ li> </ उल> </ नौसेना>

— मोहसिन

यह काम करता है लेकिन अगर आप चाहते हैं कि माउस पॉइंटर उंगली में बदल जाए, तो बस @Rutesh Makhijani के उत्तर में सुझाए अनुसार href = "जावास्क्रिप्ट: void (0)" जोड़ें।

— तारिक

Answer 13

केवल एक चीज जो मेरे लिए काम करती है वह थी उपरोक्त का एक संयोजन:

सबसे पहले उल में ली

<li><a onclick="LoadTab2_1()" href="JavaScript:void(0)">All Assigned</a></li>

फिर LoadTab2_1 में मैंने मैन्युअल रूप से टैब divs को स्विच किया

$("#tabs-2-1").hide();
    $("#tabs-2-2").show();

ऐसा इसलिए है क्योंकि टैब में भी एक्शन को डिस्कनेक्ट करता है

प्राथमिक टैब चीजों को बदलने पर आपको टैब स्टाइल को मैन्युअल रूप से करने की भी आवश्यकता होती है

$("#secTab1").addClass("ui-tabs-active").addClass("ui-state-active").addClass("ui-state-hover").addClass("ui-state-focus");
    $("#secTab1 a").css("color", "#ffffff");

Answer 14

आप इसे करके देख सकते हैं

<a style='cursor:pointer' >Link</a>

Answer 15

<a href="#" onclick="SomeFunction()"  class="SomeClass">sth.</a>

यह मेरा एंकर टैग था। इसलिए onClick पर झूठी वापसी करें = "" घटना यहाँ उपयोगी नहीं है। मैंने अभी-अभी href = "#" संपत्ति निकाली और यह मेरे लिए नीचे की तरह काम किया

<a onclick="SomeFunction()"  class="SomeClass">sth.</a>

और मुझे इस सीएसएस को जोड़ने की आवश्यकता है।

.SomeClass
{
    cursor: pointer;
}

Comments

उसका क्या मतलब है? क्या अनुशंसित है और क्यों?

— बर्क

जावास्क्रिप्ट और एचटीएमएल को अलग-अलग फाइलों में रखने के लिए इसका अच्छा अभ्यास, यहां एक विस्तृत जवाब है: stackoverflow.com/questions/5871640/…

— एलेक्जेंड्रू सेवेरिन

Answer 16

मुझे एक वर्डप्रेस साइट पर इस मुद्दे का सामना करना पड़ा। ड्रॉपडाउन मेनू के हेडर में हमेशा विशेषता होती है href=""और हेडर प्लगइन का उपयोग केवल मानक यूआरएल के लिए किया जाता है। इस कोड को पाद लेख में चलाने का सबसे आसान समाधान था:

jQuery('[href=""]').click(function(e){
    e.preventDefault();
});

यह खाली एंकरों को कुछ भी करने से रोक देगा।

Answer 17

href="javascript:void(0)"अपने एंकर टैग में इस तरह के फ़ंक्शन का उपयोग करके प्रतिक्रिया का समर्थन न करें, लेकिन यहां कुछ ऐसा है जो बहुत अच्छी तरह से काम करता है।

<a href="#" onClick={() => null} >link</a>

Answer 18

मुझे पता है कि यह एक jQuery प्रश्न के रूप में टैग किया गया है, लेकिन आप इसका जवाब AngularJS के साथ भी दे सकते हैं।

अपने तत्व में, एनजी-क्लिक निर्देश जोड़ें और $ ईवेंट चर का उपयोग करें जो क्लिक ईवेंट है ... इसके डिफ़ॉल्ट व्यवहार को रोकें:

<a href="#" ng-click="$event.preventDefault()">

तुम भी एक समारोह में $ घटना चर पारित कर सकते हैं:

<a href="#" ng-click="doSomething($event)">

उस फ़ंक्शन में, आप क्लिक इवेंट के साथ जो चाहें करें।