पृष्ठ के शीर्ष पर '#' लिंक पर क्लिक करने से कैसे रोकें?

Question

मैं वर्तमान में <a>jQuery के साथ टैग का उपयोग कर रहा हूं , क्लिक इवेंट आदि जैसी चीजें शुरू करने के लिए

उदाहरण है <a href="#" class="someclass">Text</a>

लेकिन मुझे नफरत है कि '#' पेज को पेज के शीर्ष पर कैसे पहुंचाता है। मैं इसके बजाय क्या कर सकता हूं?

Comments

का डुप्लीकेट stackoverflow.com/questions/720970/jquery-hyperlinks-href-value/...

— Bogdan Constantinescu

मैं यहाँ डेविड डोरवार्ड साथ हूँ, और gargantaun जुड़ा हुआ डुप्लिकेट प्रश्न पर। यदि आपकी वेबसाइट पर लिंक हैं, तो उन्हें सामान्य लिंक के रूप में कार्य करना होगा। यदि जावास्क्रिप्ट उन्हें स्वीकार करता है और कुछ अलग करता है, सभी अच्छी तरह से और अच्छा है, लेकिन आपको वहां एक वास्तविक लिंक होना चाहिए, जो एक वास्तविक पृष्ठ पर ले जाता है। यह सभी प्रकार के कारणों के लिए आवश्यक है, जिनमें से कम से कम एसईओ और पहुंच क्षमता नहीं है।

— डैनियल प्राइडेन

"बेवकूफ के रूप में बेवकूफ है" हम सब से पहले किया गया है :)

— takeshin

Answer 1

JQuery में, जब आप क्लिक ईवेंट को संभालते हैं, सामान्य तरीके से प्रतिक्रिया देने से लिंक को रोकने के लिए गलत लौटेंडिफ़ॉल्ट कार्रवाई को रोकें, जो कि hrefविशेषता को देखने के लिए होती है, (प्रति पॉवॉय की टिप्पणी और एरिक के उत्तर के अनुसार ):

$('a.someclass').click(function(e)
{
    // Special stuff to do when this link is clicked...

    // Cancel the default action
    e.preventDefault();
});

Comments

@pranay: ओपी ने निर्दिष्ट किया कि वह इन लिंक के साथ काम करने के लिए jQuery का उपयोग कर रहा है।

— BoltClock

झूठे रिटर्न के बजाय, एक event.preventDefault () करें। यह उन लोगों के लिए अधिक स्पष्ट है जो आपके कोड को पढ़ेंगे।

— RvdK

@PoweRoy: मिल गया। मैं संपादन किया और कुछ नया करने की :) सीखा

— BoltClock

@BoltClock ओपी को एंकरों के बजाय क्लिक घटनाओं को संभालने के लिए बटन का उपयोग करना चाहिए। आपका उत्तर बहुत उपयोगी है, लेकिन इस मामले में जब href कहीं इंगित करता है और आपको इस समय पुनर्निर्देशित करने की आवश्यकता नहीं है । कार्रवाई की डिफ़ॉल्ट व्यवहार को रोकने की ज़रूरत नहीं है एक तरह की सलाह है: चाकू ले लो, ब्लेड को पकड़ो और हैंडल का उपयोग करके नाखूनों को दबाएं :) काम के लिए एक सही उपकरण लें!

— ताकेशिन

अगर jquery:$('a[href=#]').click(function(e) { e.preventDefault(); });

— Snufkin

Answer 2

तो यह पुराना है लेकिन ... बस अगर कोई इसे खोज में पाता है।

पृष्ठ के "#/"बजाय बस का उपयोग करें "#"और पृष्ठ कूद नहीं होगा।

Comments

वास्तव में मुझे क्या चाहिए! आपकी टिप्पणी के एक साल बाद भी यह मेरे लिए मददगार था इसलिए आपको धन्यवाद

— जैक

यह काम करता है क्योंकि यह नामित लंगर के लिए नेविगेट करता है /, इसलिए नहीं कि #/इसका कोई अर्थ है। आप के साथ एक ही काम कर सकते हैं #whateveryouwantऔर यह शीर्ष करने के लिए एक कूद को रोकने जाएगा

— खिचड़ी

यह सबसे अच्छा जवाब होने की जरूरत है। तनिक तुम।

— गिल्बर्टो सैंचेज़

@ सलंग, हालांकि आप सही हैं, और यह सिर्फ नाइटपैकिंग है, लेकिन मैं "#whateveryouwant" के बजाय "# /" का उपयोग करना पसंद करूंगा क्योंकि "# /" का उपयोग काफी सामान्य है और इस प्रकार इरादे (क्लीन कोड) का पता चलता है। यह अभी भी हालांकि जवाब के लिए एक अतिरिक्त हो सकता है।

— जॉबबर्ट

खबरदार - यह ब्राउज़र इतिहास में एक रिकॉर्ड बनाता है इसलिए क्लिक करने से वह नहीं होगा जो उपयोगकर्ता को लगता है कि वह लिंक के साथ #/या किसी भी चीज़ पर क्लिक करने के बाद ऐसा करेगा #whatever।

— डैरेन स्वीनी

Answer 3

आप इसे इस तरह भी लिख सकते हैं:

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

im एक बेहतर तरीका यकीन नहीं है, लेकिन यह एक तरीका है :)

Comments

यह विधि प्री-एचटीएमएल 4 के लिए ठीक थी लेकिन आज यह बहुत बुरा व्यवहार है क्योंकि यह कई नेविगेशन क्रियाओं को तोड़ती है जैसे कि "नए टैब में खुला लिंक"।

— स्टीव-ओ

आप शायद सही हैं लेकिन .. इस मामले में यह गलत है क्योंकि वह एक घटना को नए टैब में खुला लिंक दे रहा है, वैसे भी काम नहीं कर रहा है ...

— आदमी schaller

शार्टकट है, href='javascript:;'लेकिन सावधान रहें कि यह IE में खिड़की.बाहर लोड घटना को ट्रिगर करता है

— मिहिर

इससे उसका अपना कार्य टूट सकता है? क्योंकि अगर मैं स्लाइड्स रेंडर करने के लिए अपनी फंकिंग करता हूं तो वह अब ट्रिगर नहीं है।

— user3806549

Answer 4

समाधान # 1: (सादा)

<a href="#!" class="someclass">Text</a>

---

समाधान # 2: (आवश्यक javascript)

<a href="javascript:void(0);" class="someclass">Text</a>

---

समाधान # 3: (आवश्यक jQuery)

<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
    e.preventDefault();
});
</script>

Comments

पहला उपाय एकदम सही है। लघु, स्वच्छ और सरल। यह स्वीकृत उत्तर होना चाहिए। धन्यवाद!

— AlmostPitt

नंबर 1 एक भयानक समाधान है। धन्यवाद!

— ब्रेंटन स्कॉट

Answer 5

आप इससे event.preventDefault()बचने के लिए उपयोग कर सकते हैं । यहां अधिक पढ़ें: http://api.jquery.com/event.preventDefault/ ।

Answer 6

के <input type="button" />बजाय का <a>उपयोग करें और यदि आप चाहें तो एक लिंक की तरह दिखने के लिए इसे स्टाइल करने के लिए CSS का उपयोग करें।

बटन विशेष रूप से क्लिक करने के लिए बनाए गए हैं, और उन्हें किसी भी href विशेषताओं की आवश्यकता नहीं है।

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

जब आप उपयोग href="#"करते हैं तो आपको एक ही स्थान पर इंगित करने वाले विभिन्न लिंक के टन मिलते हैं, जो एजेंट द्वारा जावास्क्रिप्ट का समर्थन नहीं करने पर काम नहीं करेगा।

Comments

@kingjeffrey लेकिन कुछ भी करना अभी भी नेविगेट करने से बेहतर है #।

— रॉबर्ट

Answer 7

यदि आप एक लंगर का उपयोग करना चाहते हैं, तो आप http://api.jquery.com/event.preventDefault/ जैसे अन्य सुझावों का उपयोग कर सकते हैं ।

आप स्पैन की तरह किसी अन्य तत्व का भी उपयोग कर सकते हैं और उस पर क्लिक ईवेंट संलग्न कर सकते हैं।

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

Answer 8

आप #0href के रूप में उपयोग कर सकते हैं , क्योंकि 0आईडी के रूप में अनुमति नहीं दी जाती है, पेज जम्प नहीं करेगा।

<a href="#0" class="someclass">Text</a>

Answer 9

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

Comments

क्या आप कृपया एक छोटी व्याख्या जोड़ सकते हैं?

— JF Meier

यह मुझे ऐसा लगता है जैसे वह किसी ऐसे एंकर पर क्लिक हैंडलर जोड़ रहा है जिसके साथ "#" का href है। इस तरह, आपको उन सभी क्लिक हैंडलर की खोज नहीं करनी होगी जो आपके पास पहले से मौजूद हैं और उनके भीतर e.preventDefault () जोड़ें।

— 1955 पर मणि 5556

Answer 10

महज प्रयोग करें

<a href="javascript:;" class="someclass">Text</a>

jQuery

$('.someclass').click(function(e) { alert("action here"); }

Answer 11

यदि तत्व का एक सार्थक href मान नहीं है, तो यह वास्तव में एक लिंक नहीं है, इसलिए इसके बजाय किसी अन्य तत्व का उपयोग क्यों न करें?

जैसा कि नेओथॉर द्वारा सुझाया गया है, एक स्पैन बस के रूप में उपयुक्त है और, अगर सही ढंग से स्टाइल किया गया है, तो उस आइटम के रूप में स्पष्ट रूप से स्पष्ट होगा जिस पर क्लिक किया जा सकता है। आप उपयोगकर्ता के माउस को ऊपर ले जाने के साथ ही एलमेन्ट को 'लाइट अप' बनाने के लिए एक हॉवर ईवेंट भी संलग्न कर सकते हैं।

हालाँकि, यह कहते हुए, आप अपनी साइट के डिज़ाइन पर पुनर्विचार करना चाह सकते हैं ताकि यह जावास्क्रिप्ट के बिना काम करे, लेकिन यह उपलब्ध होने पर जावास्क्रिप्ट द्वारा बढ़ाया जाता है।

Answer 12

Href = "#" के लिंक को लगभग हमेशा एक बटन तत्व से बदला जाना चाहिए:

<button class="someclass">Text</button>

Href = "#" के साथ लिंक का उपयोग करना भी एक एक्सेसिबिलिटी चिंता का विषय है क्योंकि ये लिंक स्क्रीन पाठकों को दिखाई देंगे, जो "लिंक - टेक्स्ट" को पढ़ेगा लेकिन यदि उपयोगकर्ता क्लिक करता है तो यह कहीं नहीं जाएगा।

Answer 13

आप बस एक href प्रॉपर्टी के बिना एक एंकर टैग पास कर सकते हैं, और आवश्यक कार्य करने के लिए jQuery का उपयोग कर सकते हैं:

<a class="foo">bar</a>

Comments

मैं आम तौर पर इस दृष्टिकोण की सिफारिश नहीं करता हूं, क्योंकि उपयोगकर्ता ने js को निष्क्रिय कर दिया है तो कोई कमबैक कार्रवाई नहीं है। लेकिन यह देखते हुए कि आपके पास पहले से ही href सेट है #, मैंने मान लिया कि यह आपके लिए चिंता का विषय नहीं है, और इस तरह से इस समाधान की पेशकश की क्योंकि यह संभवतः आपकी आवश्यकता को पूरा करने का सबसे सरल साधन है।

— किंगजेफ्रे

a:linkCSS चयनकर्ता इस एंकर टैग को लक्षित नहीं करेंगे।

— BoltClock

बोल्टकॉक, यह सच है। लेकिन st4ck0v3rfl0w ने ऐसी आवश्यकता का संकेत नहीं दिया।

— किंगजेफ्रे

फिर एक <div> का उपयोग कर सकते हैं। मेरा मानना ​​है कि <a> को बनाए रखने की बात यह है कि इसे स्टाइल रखना है, जो पहले से ही नियमित रूप से परिभाषित है <<। Href नहीं होने के कारण, इसका पता नहीं लगाया जा सकेगा और अन्य <a> की तरह स्टाइल किया जा सकेगा।

— मार्सएंडबैक

Answer 14

मैंने उपयोग कर लिया है:

<a href="javascript://nop/" class="someClass">Text</a>

Answer 15

#/चाल से काम करता है, लेकिन ब्राउज़र करने के लिए एक इतिहास घटना कहते हैं। इसलिए, वापस क्लिक करने से वह काम नहीं हो सकता है जैसा कि उपयोगकर्ता इसे करना चाहता है / कर सकता है।

$('body').click('a[href="#"]', function(e) {e.preventDefault() }); जिस तरह से मैं गया, जैसा कि यह पहले से मौजूद सामग्री के लिए काम करता है, और लोड के बाद DOM में जोड़ा गया कोई भी तत्व।

विशेष रूप से, मुझे बूटस्ट्रैप ड्रॉपडाउन-मेन्यू के अंदर .btn-group(संदर्भ) में ऐसा करने की आवश्यकता थी, इसलिए मैंने किया:

$('body').click('.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });

इस तरह इसे लक्षित किया गया था, और पृष्ठ पर किसी भी चीज़ को प्रभावित नहीं किया।

Answer 16

मैंने हमेशा उपयोग किया है:

<a href="#?">Some text</a>

पृष्ठ कूद को रोकने का प्रयास करते समय। यकीन नहीं होता कि यह सबसे अच्छा है, लेकिन ऐसा लगता है कि यह सालों से अच्छा काम कर रहा है।

Answer 17

पेज को बिना किसी जावास्क्रिप्ट के ऊपर से कूदने से रोकने के लिए 4 समान तरीके हैं:

विकल्प 1:

<a href="#0">Link</a>

विकल्प 2:

<a href="#!">Link</a>

विकल्प 3:

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

विकल्प 4 ( अनुशंसित नहीं ):

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

लेकिन event.preventDefault()अगर आप क्लिक इवेंट को jQuery में सौंप रहे हैं तो इसका उपयोग करना बेहतर है ।

Comments

हालांकि यह कोड प्रश्न का उत्तर दे सकता है, लेकिन यह समस्या का हल कैसे और / या इसके बारे में अतिरिक्त संदर्भ प्रदान करता है, इससे उत्तर के दीर्घकालिक मूल्य में सुधार होगा।

— ए। सुलेमान

Answer 18

आप अपने jquery को संसाधित करने के बाद भी गलत वापस आ सकते हैं।

उदाहरण के लिए।

$(".clickableAnchor").live(
    "click",
    function(){
        //your code
        return false; //<- prevents redirect to href address
    }
);

Comments

कि, और जीने की विधि, दोनों पदावनत हैं और किसी भी अधिक उपयोग नहीं किया जाना चाहिए।

— क्वेंटिन

Answer 19

मैं कुछ इस तरह का उपयोग करें:

<a href="#null" class="someclass">Text</a>

Answer 20

पृष्ठ को कूदने से रोकने के लिए, आपको कॉल करने के e.stopPropagation();बाद कॉल करना होगा e.preventDefault();:

stopPropagationईवेंट को DOM ट्री के ऊपर जाने से रोकता है। अधिक जानकारी यहाँ: https://api.jquery.com/event.stoppropagation/

Comments

क्या आप कृपया पूरा कोड प्रदान कर सकते हैं जिसे मैं अपने html में पेस्ट कर सकता हूं? मैं Zurb Foundation 5.5.3 का उपयोग कर रहा हूं।

— जूली एस।

Answer 21

यदि आप एक ही खंड पर एक एंकर सेक्शन में माइग्रेट करना चाहते हैं, तो बिना पेज जम्पिंग उपयोग के:

जैसे "#" के बजाय "# /" का उपयोग करें

<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..

Answer 22

कुछ जोड़ने के बाद #पृष्ठ का ध्यान उस ID वाले तत्व पर केंद्रित करता है। #/यदि आप jQuery का उपयोग कर रहे हैं तो भी सरलतम समाधान का उपयोग करना है । हालाँकि यदि आप jQuery में ईवेंट को संभाल रहे हैं, event.preventDefault()तो जाने का रास्ता है।

Answer 23

<a href="#!">Link</a>और<a href="#/">Link</a> नहीं काम करता है, तो एक बार से अधिक एक ही इनपुट पर क्लिक करना होगा .. यह केवल कई आदानों पर प्रत्येक के लिए 1 घटना क्लिक में ले जाता है।

अभी भी सबसे अच्छा तरीका है <a href="#">Link</a>

फिर,

event.preventDefault();