आप एक लिंक में एक div टैग कैसे बनाते हैं

Question

आप एक लिंक में एक div टैग कैसे बनाते हैं। मैं अपने पूरे div को क्लिक करने योग्य होना चाहता हूं।

Answer 1

<div style="cursor:pointer;" onclick="document.location='http://www.google.com'">Foo</div> 

Answer 2

जे एस:

<div onclick="location.href='url'">content</div> 

jQuery:

$("div").click(function(){ 
    window.location=$(this).find("a").attr("href"); return false; 
}); 

एक जोड़कर इन DIVs के लिए cursor:pointer उपयोग करने के लिए

Answer 3

आप एक कड़ी के रूप में पूरे DIV समारोह कर सकते हैं सुनिश्चित करें onclick = "window.location = 'TARGET URL'" और अपनी शैली को "कर्सर: पॉइंटर" पर सेट करके। लेकिन अक्सर ऐसा करना एक बुरा विचार है क्योंकि खोज इंजन परिणामस्वरूप लिंक का पालन नहीं कर पाएंगे, पाठक टैब में खोलने या लिंक स्थान आदि की प्रतिलिपि नहीं कर पाएंगे। इसके बजाय, आप एक नियमित एंकर टैग बना सकते हैं और फिर अपनी शैली को प्रदर्शित करने के लिए सेट करें: ब्लॉक करें, और फिर इसे एक डीआईवी के रूप में स्टाइल करें।

Answer 4

<div style="cursor:pointer" onclick="document.location='http://www.google.com'">Content Goes Here</div> 

Answer 5

इसे न करें।

• आप एक लिंक चाहते हैं, उचित <A>NCHOR</a> में सामग्री लपेट दें।
• आप लिंक <DIV> चालू करना चाहते हैं, तो एक <A>NCHOR</A>
• अंदर <DIV> रैप करने के लिए "जावास्क्रिप्ट" का उपयोग आप जब क्लिक करने <DIV>onclick ईवेंट हैंडलर का उपयोग कुछ काम करवाना चाहते हैं ... और डॉन हैं ' इसे एक "लिंक" कहते हैं।

Answer 6

आप इस प्रभाव को प्राप्त करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं। यदि आप ढांचे का उपयोग करते हैं तो इस तरह की चीज काफी सरल हो जाती है। यहाँ jQuery में एक उदाहरण है:

$('div#id').click(function (e) { 
    // Do whatever you want 
}); 

यह समाधान तर्क अपने मार्कअप में नहीं रखने का विशिष्ट लाभ है।

Answer 7

यदि आपको div के अंदर अपना एंकर टैग सेट करना है, तो आप डिस्प्ले के माध्यम से div को भरने के लिए एंकर सेट करने के लिए सीएसएस का उपयोग भी कर सकते हैं: ब्लॉक।

जैसे:

<div style="height: 80px"><a href="#" style="display: block">Text</a></div> 

अब जब उपयोगकर्ता अपने कर्सर तैरता कि div में एंकर टैग div भर जाएगा। diva के अंदर अपने

Answer 8

आप एचटीएमएल 5 का उपयोग कर रहे हैं, तो this other प्रश्न में बताया, तब तक आप रख सकते हैं:

<a href="http://www.google.com"><div>Some content here</div></a> 

preffer इस विधि यह आपके संरचना है कि सभी सामग्री क्लिक करने योग्य है में स्पष्ट करता है के रूप में, और जहां यह इंगित कर रहा है।

Answer 9

तो क्या आप एक तत्व चाहते हैं जो ऐसा नहीं है?

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

सभी ने कहा कि, कभी-कभी आपको नियमों को तोड़ना पड़ता है। अब, सवाल javascript नहीं है, तो मैं त्याग यहाँ डाल करने के लिए जा रहा हूँ: बिना

आप एक लिंक के रूप में एक <div> कार्य नहीं हो सकता है या तो या इस तरह के रूप में एक <form> एक लिंक का उपयोग (समकक्ष, जिसमें केवल सबमिट बटन होता है) या जावास्क्रिप्ट का उपयोग करना।

यहाँ से, क्या यह उत्तर ग्रहण करने के लिए है कि जावास्क्रिप्ट अनुमति दी है जा रहा है, और इसके अलावा कि jQuery (उदाहरण के संक्षिप्तता के लिए) का उपयोग किया जा रहा है।

सभी ने कहा कि, एक लिंक को एक लिंक बनाने में मदद करता है।

---

लिंक आम तौर पर तत्व होते हैं जिन्हें आप क्लिक करते हैं ताकि वे आपको एक नए दस्तावेज़ पर नेविगेट कर सकें।

यह काफी आसान लगता है। एक क्लिक घटना के लिए सुनो और स्थान बदलने के लिए:

_{वहाँ तुम्हारे पास है इस}

$('.link').on('click', function() { 
 
    window.location = 'http://example.com'; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="link">Fake Link</div>

मत करो, <div> अब एक कड़ी है। रुको ... वह क्या है? अभिगम्यता के बारे में क्या? ओह ठीक है, स्क्रीन पाठक और सहायक तकनीक के उपयोगकर्ता लिंक पर क्लिक करने में सक्षम नहीं होंगे, खासकर यदि वे केवल कीबोर्ड का उपयोग कर रहे हैं।

फिक्सिंग कि बहुत आसान है, के कीबोर्ड केवल उन <div> ध्यान केंद्रित करने की अनुमति देते हैं, और क्लिक करें घटना जब वे प्रेस दर्ज गति प्रदान:

_{ऐसा मत करो या तो}

$('.link').on({ 
 
    'click': function() { 
 
    window.location = 'http://example.com'; 
 
    }, 
 
    'keydown': function (e) { 
 
    if (e.which === 13) { 
 
     $(this).trigger('click'); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="link" tabindex="0">Fake Link</div>

फिर, आपके पास यह है, यह <div> अब एक लिंक है। प्रतीक्षा करें ... फिर? अभी भी सुलभता की समस्याएं? ओह ठीक है, तो यह पता चला है कि सहायक तकनीक को पता नहीं है कि <div> अभी तक एक लिंक है, भले ही आप कीबोर्ड के माध्यम से वहां जा सकें, उपयोगकर्ताओं को यह नहीं बताया जा रहा है कि इसके साथ क्या किया जाए।

सौभाग्य से, एक विशेषता है जिसका उपयोग HTML तत्व की डिफ़ॉल्ट भूमिका को ओवरराइड करने के लिए किया जा सकता है, ताकि स्क्रीन पाठकों और जैसे कि हमारे <div> जैसे अनुकूलित तत्वों को वर्गीकृत करना है। विशेषता पाठ्यक्रम के [role] विशेषता है, और यह अच्छी तरह से स्क्रीन रीडर है कि हमारे <div> एक कड़ी है बताता है:

_{ओह, इस बदतर हर मिनट हो रही है}

$('[role="link"]').on({ 
 
    'click': function() { 
 
    window.location = 'http://example.com'; 
 
    }, 
 
    'keydown': function (e) { 
 
    if (e.which === 13) { 
 
     $(this).trigger('click'); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div role="link" tabindex="0">Fake Link</div>

अंत में , हमारे <div> एक लिन है --- ओह अब अन्य देव शिकायत कर रहे हैं। अब क्या?

ठीक है, तो देवों को कोड पसंद नहीं है। उन्होंने घटना पर preventDefault की कोशिश की, और यह सिर्फ काम करता रहता है। यही कारण है कि ठीक करने के लिए आसान है:

_{मैं चेतावनी दी तो आप इस बुरा}

$(document).on({ 
 
    'click': function (e) { 
 
    if (!e.isDefaultPrevented()) { 
 
     window.location = 'http://example.com'; 
 
    } 
 
    }, 
 
    'keydown': function (e) { 
 
    if (e.which === 13 && !e.isDefaultPrevented()) { 
 
     $(this).trigger('click'); 
 
    } 
 
    } 
 
}, '[role="link"]'); 
 

 
$('[aria-disabled="true"]').on('click', function (e) { 
 
    e.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div role="link" tabindex="0">Fake Link</div> 
 
<div role="link" aria-disabled="true" tabindex="0">Fake disabled link</div>

वहाँ हमारे पास है था --- कुछ और भी है? मुझे और क्या नहीं पता? मुझे सबकुछ बताएं अब ताकि मैं इसे ठीक कर सकूं!

• ठीक है, इसलिए लक्ष्य निर्दिष्ट करने का कोई तरीका नहीं है। हम इसे window.open पर अपडेट करके ठीक कर सकते हैं।
• घटनाओं क्लिक करें और कीबोर्ड की घटनाओं Ctrl, Alt, और शिफ्ट कुंजी अनदेखी कर रहे हैं। यह काफी आसान है, बस ईवेंट ऑब्जेक्ट पर उन मानों को जांचने की आवश्यकता है।
• प्रासंगिक डेटा निर्दिष्ट करने का कोई तरीका नहीं है। आइए बस कुछ [data-*] विशेषताओं को जोड़ें, और इसे एक दिन के साथ कॉल करें।
• क्लिक इवेंट का उपयोग नहीं किया जा रहा माउस बटन का पालन नहीं कर रहा है, मध्य माउस को एक नए टैब में खोलना चाहिए, दाहिने माउस को ईवेंट ट्रिगर नहीं करना चाहिए। काफी आसान है, बस ईवेंट श्रोताओं को कुछ और चेक जोड़ें।
• शैली अजीब लगती है। पाठ्यक्रम की अच्छी तरह से स्टाइल पहन रहे हैं, यह एक <DIV> कोई एन्चोर नहीं है!

अच्छी तरह से, मैं पहले चार मुद्दों को संबोधित करूंगा, और कोई और नहीं। मैं इसे इस बेवकूफ कस्टम तत्व कचरा के साथ मिला है। मुझे शुरुआत से ही <a> तत्व का उपयोग करना चाहिए था।

_{तुम इतनी}

$(document).on({ 
 
    'click': function (e) { 
 
    var target, 
 
     href; 
 
    if (!e.isDefaultPrevented() && (e.which === 1 || e.which === 2)) { 
 
     target = $(this).data('target') || '_self'; 
 
     href = $(this).data('href'); 
 
     if (e.ctrlKey || e.shiftKey || e.which === 2) { 
 
     target = '_blank'; //close enough 
 
     } 
 
     open(href, target); 
 
    } 
 
    }, 
 
    'keydown': function (e) { 
 
    if (e.which === 13 && !e.isDefaultPrevented()) { 
 
     $(this).trigger({ 
 
     type: 'click', 
 
     ctrlKey: e.ctrlKey, 
 
     altKey: e.altKey, 
 
     shiftKey: e.shiftKey 
 
     }); 
 
    } 
 
    } 
 
}, '[role="link"]'); 
 

 
$('[aria-disabled="true"]').on('click', function (e) { 
 
    e.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div role="link" tabindex="0" data-href="http://example.com/">Fake Link</div> 
 
<div role="link" tabindex="0" data-href="http://example.com/" data-target="_blank">Fake Link With Target</div> 
 
<div role="link" aria-disabled="true" tabindex="0" data-href="http://example.com/">Fake disabled link</div>

बताया

_{नोट ढेर है कि के टुकड़े, क्योंकि वे कैसे सैंडबॉक्स रहे हैं के खुले पॉपअप विंडोज़ नहीं होगा।}

यही है। यह खरगोश छेद का अंत है। उस पागलपन के दौरान जब आप आसानी से प्राप्त कर सकते थे:

<a href="http://example.com/"> 
    ...your markup here... 
</a> 

मेरे द्वारा यहां पोस्ट किए गए कोड में शायद समस्याएं हैं। इसमें शायद बग्स हैं जो मुझे अभी तक महसूस नहीं करते हैं। जो ब्राउज़र आपको मुफ्त में देता है उसे डुप्लिकेट करने का प्रयास करना कठिन है। ऐसी कई बारीकियां हैं जिन्हें अनदेखा करना आसान है कि यह 99% समय का अनुकरण करने की कोशिश करने योग्य नहीं है।

Answer 10

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