2012-12-06 18 views
5

से पहले href प्रदर्शन मैं नीचे दिए गए लिंक है:onClick

<a href="#HDR" onClick="showGallery()">I</a> 

और यह उपयोग निम्नलिखित जावास्क्रिप्ट:

function showGallery(){ 
    if(window.location.hash) { 
     $('#gallery').fadeIn('fast'); 
     var hash = window.location.hash.substring(1); 
     alert(hash); 
    } else { 

    } 

} 

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

तो लिंक पहले जावास्क्रिप्ट बना देता है, और मैं काम नहीं करता क्योंकि 'यूआरएल में कोई हैशटैग नहीं है और उसके बाद, यह href करता है और हैशटैग डालें यूआरएल में मैं यह कैसे कर सकता हूं?

मेरे लक्ष्य:

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

क्या इसे बनाने के लिए एक और आसान या साफ तरीका भी है? आशा है कि आप समझें कि मैं क्या चाहता हूं।

उत्तर

4

आधुनिक ब्राउज़रों के लिए, आप onhashchange घटना के लिए अपने जावास्क्रिप्ट कोड बाध्य कर सकते हैं। लिंक जावास्क्रिप्ट के बिना हो जाएगा:

<a href="#HDR">I</a> 

और जावास्क्रिप्ट चलाया जाता है जब भी हैश बदल गया है:

function locationHashChanged() { 
    if (location.hash === "#HDR") { 
     $('#gallery').fadeIn('fast'); 
    } 
} 

window.onhashchange = locationHashChanged; 
+0

अच्छा! "सुरुचिपूर्ण" विधि है :) धन्यवाद +1 और स्वीकार करें;) लेकिन window.onhashchange = locationHashChanged क्या करता है; क्या मतलब है? –

+2

यह एक इवेंट हैंडलर जोड़ता है, ताकि जब भी 'हैशचेंज' ईवेंट विंडो पर ट्रिगर किया जाता है तो फ़ंक्शन 'लोकेशन हैश चेंज' कहा जाता है। JQuery में यह '$ (विंडो) होगा। बाइंड ('हैशचेंज', लोकेशनशैश चेंज)'। – Sjoerd

1

क्या आपने ऑनक्लिक ईवेंट में देरी करने के लिए सेटटाइमआउट कॉल करने का प्रयास किया है?

इस तरह:

<a href="#HDR" onClick="setTimeout(function(){showGallery.call(this)},20)">I</a> 
+0

कूल! यह काम करता हैं! लेकिन क्या यह थोड़ा बदसूरत नहीं है? लेकिन +1! –

+0

बदसूरत बदसूरत .. लेकिन मेरी स्थिति में यह एकमात्र संभव तरीका है। दाह! –

1

आप काफी काफी इस सरल बना सकते हैं, है ना अन्य बातों के लिए href उपयोग करने के लिए अच्छा अभ्यास है शुद्ध नेविगेशन से।

<a onClick="showGallery('HDR')">I</a> 

और फिर:

function showGallery(name){ 
    if(name) { 
     $('#gallery').fadeIn('fast'); 
     alert(name); 
    } else { 

    } 
} 
+0

मैंने यह भी कोशिश की। लेकिन फिर गैलरी केवल इस लिंक का विरोध करती है। मैं इसे भी दिखाना चाहता हूं अगर यूआरएल में # एचडीआर और मैं साइट को अपडेट करता हूं। उदाहरण के साथ CTRL + R –

+1

आह ठीक है, तो आपको नीचे सॉजेरड के उत्तर के साथ जाना चाहिए, लेकिन आप हैश बदल गए सामानों और ब्राउज़र को समर्थित करने के लिए थोड़ा और पढ़ना चाहेंगे। –

0

आप लिंक का पालन बिना showGallery() को चलाने के लिए चाहते हैं, सही कोड यह है:

<a href="#HDR" onClick="showGallery(); return false;">I</a> 

href उपयोगकर्ता अभी भी रखने से स्टेटस बार में गंतव्य देखता है और नेविगेशन अभी भी जावास्क्रिप्ट (यानी Google) के बिना ग्राहकों के लिए काम करता है। ईवेंट हैंडलर में झूठी वापसी करके, आप ब्राउज़र को लिंक का पालन करने से रोकते हैं।

शो गैलरी() में, आप गैलरी दिखा सकते हैं और location.hash में '#HDR' जोड़ सकते हैं।

+0

इसे गैलरी चलाया जाना चाहिए। अब यह कुछ भी नहीं है ... –

0

आपको विंडो के हैश को सत्यापित करने की आवश्यकता नहीं है, क्योंकि पहले क्लिक पर आपके पास पता बार में कोई हैश नहीं है। कार्यक्षमता केवल दूसरे क्लिक पर लागू होगी।

इस आप क्या कर सकते है:

<a href="#HDR" id="g1" onClick="showGallery('g1')">gallery 1</a>

function showGallery(galid){ 
    var linkhash = $('#' + galid).attr('href').substring(1); 

    alert(linkhash); 

    $('#gallery' + linkhash).fadeIn('fast'); 
} 
संबंधित मुद्दे