एक लिंक में एक div बनाओ

545

मेरे पास <div>कुछ फैंसी दृश्य सामग्री के साथ एक ब्लॉक है जिसे मैं बदलना नहीं चाहता। मैं इसे एक क्लिक करने योग्य लिंक बनाना चाहता हूं।

मैं ऐसा कुछ ढूंढ रहा हूं <a href="…"><div> … </div></a>, लेकिन यह वैध XHTML 1.1 है।

— ईई।
स्रोत

79

एक अच्छा कारण div में एक पृष्ठभूमि छवि होगी

— सिमोन_विवर

1

मेरे पास सबसे अच्छे मतदान के आधार पर एक अच्छा काम करने वाला उदाहरण है। यहाँ

— माइक

7

एचटीएमएल 5 में ए के divतहत होना पूरी तरह से वैध है a।

— जुआन ए। नवारो

739

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

मेरे लिए नो-नोस हैं: जावास्क्रिप्ट (केवल एक लिंक के लिए आवश्यक नहीं होना चाहिए, और बहुत खराब एसईओ / एक्सेसिबिलिटी); अमान्य HTML।

संक्षेप में यह यह है:

सामान्य सीएसएस तकनीकों और मान्य HTML का उपयोग करके अपने पैनल का निर्माण करें।
अगर आप पैनल पर क्लिक करते हैं, तो कहीं न कहीं एक लिंक है जिसे आप डिफ़ॉल्ट लिंक बनाना चाहते हैं (आप अन्य लिंक भी कर सकते हैं)।
उस लिंक के अंदर, एक खाली स्पैन टैग डालें ( <span></span>, नहीं <span />- धन्यवाद @Campey)
पैनल की स्थिति दें: रिश्तेदार
खाली अवधि के लिए निम्नलिखित सीएसएस लागू करें:
```
{ 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;

  z-index: 1;

  /* fixes overlap error in IE7/8, 
     make sure you have an empty gif */
  background-image: url('empty.gif');
}   
```
यह अब पैनल को कवर करेगा, और जैसा कि यह एक <A>टैग के अंदर है , यह एक क्लिक करने योग्य लिंक है
पैनल की स्थिति के अंदर कोई अन्य लिंक दें: रिश्तेदार और एक उपयुक्त z-index (> 1) उन्हें डिफ़ॉल्ट स्पैन लिंक के सामने लाने के लिए

— thepeer
स्रोत

11

धन्यवाद अच्छा काम करता है। यदि IE8 में चीजें बुरी तरह से टूटती हैं (जैसे उन्होंने मेरे लिए), तो सुनिश्चित करें कि आपके पास एक खाली स्पैन (<स्पैन ... /> के बजाय एक ओपनिंग और क्लोजिंग स्पैन टैग (<span ...> </ span>) है। )।

— कैंपी

1

IE7 / 8 में कोड पूरी तरह से काम नहीं करता है, अन्य तत्व जो चयन करने योग्य हैं, <a><span></span></a>तत्व पर पूर्वता लेते हैं । जेड-इंडेक्स सेट होने पर भी कंटेनर के अंदर के चित्र और टेक्स्ट लिंक नहीं करेंगे।

— स्पोइक

67

उन लोगों के लिए एक बेला जो मेरे जैसे मूर्ख हैं और कुछ गलत करते हैं, इसलिए इसके साथ थोड़ा खेलना पड़ता है: jsfiddle.net/hf75B/1

— एलेक्सा

7

आप IE9 में यह कोशिश की है? मुझे यह विधि पसंद है, और मैं इसका उपयोग कर रहा हूं, लेकिन मैंने इसे IE9 में सिर्फ इसका परीक्षण किया (@AlexMA से फिडेल सहित), और जो मैं देख रहा हूं वह यह है कि आप पाठ पर div EXCEPT में कहीं भी क्लिक कर सकते हैं। जब आप पाठ पर होवर करते हैं, तो कर्सर मानक टेक्स्ट कर्सर में बदल जाता है और जब आप पाठ पर क्लिक करते हैं तो यह कुछ भी नहीं करता है। चूंकि उपयोगकर्ता पाठ तत्वों पर क्लिक करने के लिए प्रवण हैं (और जब पाठ तत्व अधिकांश div को भरते हैं), तो यह IE9 में इस समाधान को अनुपयोगी बनाता है। किसी और को यह अनुभव किया है या एक समाधान है?

— bigmac 22

2

क्या कोई जानता है कि कैसे है: होवर सीएसएस इस समाधान के साथ काम करता है? शायद फिदेल में डाले गए जवाब का हवाला देते हुए?

— nktokyo

251

आप divस्वयं एक लिंक नहीं बना सकते हैं , लेकिन आप <a>टैग के रूप में कार्य कर सकते हैं block, वही व्यवहार एक <div>है।

a {
    display: block;
}

फिर आप उस पर चौड़ाई और ऊंचाई सेट कर सकते हैं।

— Soviut
स्रोत

11

हालाँकि, यह एक लिंक में 'div' नहीं बनाता है। यह एक ब्लॉक एलिमेंट में एक लिंक बनाता है। यह थोड़ा अलग है।

— jjnguy

1

यह आपकी समस्या का समाधान है। क्योंकि आप संशोधित कर सकते हैं div हाइपरलिंक की तरह क्लिक किया जा सकता है, लेकिन आप सभी ब्राउज़र में प्रदर्शन के लिए कर्सर (= हाथ) सेट नहीं कर सकते (केवल IE इसे समर्थन करते हैं!)।

— आत्मा_मास्टर

3

jjnguy: कैसे? मुझे एक लिंक में बहुत सारी सामग्री पसंद नहीं है, लेकिन यह सिर्फ एक नेविगेशन मेनू या ऐसा कुछ का हिस्सा हो सकता है। एक लंगर तत्व (<a>) जरूरी नहीं कि वह सादा पाठ हो? किस तरह से इसे एक ब्लॉक में बनाना गलत है? यह शब्दार्थ रूप से सही है और इसका उपयोग इसे प्रदर्शित करने के लिए किया जा सकता है जैसा आप चाहते हैं।

— अरिव सिस्टड

23

यह एक अस्पष्ट सवाल का पूरी तरह से वैध समाधान है। आप वास्तव में केवल एक div के चारों ओर एक लंगर तत्व लपेट सकते हैं, लेकिन यह शब्दार्थिक रूप से गलत होगा। (इनलाइन तत्व के भीतर ब्लॉक तत्व)।

— 18

3

jjnguy: यह बहुत आम बात है। मैं यह नहीं कह रहा हूँ कि लिंक के साथ divs बदलें, लेकिन सवाल की आवाज़ से वह बस एक ब्लॉक चाहता था जिसे वह एक बटन या कुछ की तरह क्लिक कर सकता है।

— सोवियुत 29:09

72

यह एक प्राचीन प्रश्न है, लेकिन मैंने सोचा कि मैं इसका उत्तर दूंगा क्योंकि यहां हर किसी के पास कुछ पागल समाधान हैं। यह वास्तव में बहुत सरल है ...

एक एंकर टैग इस तरह काम करता है -

<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>

Sooo ...

<a href="whatever you want"> <div id="thediv" /> </a>

हालांकि मुझे यकीन नहीं है कि यह वैध है। अगर बोले गए समाधान के पीछे तर्क है, तो मैं माफी चाहता हूं ...

— Zizo47
स्रोत

6

यह तब तक वैध HTML है जब तक कि <div>इसमें कोई संवादात्मक सामग्री (अन्य <a>तत्व, <button>तत्व, आदि) न हों।

50

आपका उदाहरण वैध HTML नहीं है - इनलाइन तत्व में निहित ब्लॉक - जब तक आप HTML5 का उपयोग नहीं कर रहे हैं, जिसने लिंक के लिए अपवाद बनाया है।

— thepeer

1

यह एक बुरा उदाहरण है, क्योंकि aटैग क्या करता है, सभी पाठ को एक में ले जाता है divऔर इसे रेखांकित करता है ... इसे स्टाइल के साथ कम किया जा सकता है, लेकिन शीर्ष उत्तर बेहतर है।

— दिमित्री नेस्टरुक

2

a #thediv{font-weight:normal;text-decoration:none;}आप सभी की जरूरत है शैली-वार

— tyjkenn

1

इसकी कोशिश की और यह काम कर गया, हालांकि इसने तत्व की स्थिति को तोड़ दिया। हाँ doctype Chrome में HTML5 है (कुछ 2014 संस्करण) ..

— BAR

60

थोड़ी जावास्क्रिप्ट की आवश्यकता है। लेकिन, आपका divक्लिक करने योग्य होगा।

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

— jjnguy
स्रोत

9

पृष्ठ पर खराब शब्दार्थ के परिणाम हालांकि, मैं तकनीकी रूप से संभव होते हुए भी इसे टालूंगा।

— अरिव सिस्टड

2

मैंने इस समाधान का उपयोग करने के बारे में सोचा, लेकिन यह बदसूरत है। मुझे प्रदर्शन से जुड़े समाधान पसंद हैं: बेहतर ब्लॉक करें।

— एलिलयूरोड

9

यह लिंक जैसा दिखता है, लेकिन असली लिंक नहीं है। यह गंभीर प्रयोज्य और accesibility मुद्दों है, और वास्तव में एक बुरा समाधान है।

— WhyNotHugo

2

सबसे अच्छा उपाय। हमें बस स्क्रिप्ट चलाने और उसे "यह" भेजने की आवश्यकता है।

— अरमान हयोट्स

3

यदि उनके पास js नहीं है तो आपने कार्यक्षमता खो दी है। साथ ही साथ SEO के लिए बुरा है।

— BAR

40

इस विकल्प के लिए सबसे खाली उत्तर के रूप में एक खाली.गिफ़ की आवश्यकता नहीं है:

HTML:

 <div class="feature">
       <a href="http://www.example.com"></a>
 </div>

सीएसएस:

 div.feature {
        position: relative;
    }

    div.feature a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none; /* No underlines on the link */
        z-index: 10; /* Places the link above everything else in the div */
        background-color: #FFF; /* Fix to make div clickable in IE */
        opacity: 0; /* Fix to make div clickable in IE */
        filter: alpha(opacity=1); /* Fix to make div clickable in IE */
    }

जैसा कि http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-use-css/ पर प्रस्तावित है ।

— MagTun
स्रोत

1

धन्यवाद! क्रिस जुमोनविले का समाधान एंड्रियोड और आईफोन दोनों पर बहुत अच्छा काम कर रहा है। उदाहरण: Gastateparks.org/specials

— Loren

1

क्या ऐसा नहीं होना चाहिए div.feature > aकि "बाकी सब कुछ" के हिस्से में भी कोई लिंक छिपा हो?

— ट्वीस्ट्रीम

यह चुना हुआ उत्तर होना चाहिए, बूटस्ट्रैप के साथ भी काम करता है

— एंथोनी काल

23

यह एक "वैध" समाधान है जिसे आप प्राप्त करना चाहते हैं।

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

लेकिन सबसे अधिक संभावना है कि आप वास्तव में क्या चाहते हैं <a>एक ब्लॉक स्तर तत्व के रूप में प्रदर्शित एक टैग है।

मैं एक हाइपरलिंक का अनुकरण करने के लिए जावास्क्रिप्ट का उपयोग करने की सलाह नहीं दूंगा क्योंकि यह मार्कअप सत्यापन के उद्देश्य को पराजित करता है, जो अंततः पहुंच को बढ़ावा देने के लिए है (उचित अर्थ नियमों का पालन करते हुए अच्छी तरह से गठित दस्तावेज़ों की संभावना कम से कम उसी दस्तावेज़ को विभिन्न ब्राउज़रों के साथ अलग तरीके से व्याख्या की जाएगी)।

ऐसे वेब पेज को प्रकाशित करना बेहतर होगा जो मान्य नहीं है, लेकिन जावास्क्रिप्ट अक्षम वाले सभी ब्राउज़र पर रेंडर और फ़ंक्शन ठीक से करता है । इसके अलावा, का उपयोग कर onclickएक स्क्रीन रीडर के लिए अर्थ संबंधी जानकारी प्रदान नहीं करता है यह निर्धारित करने के लिए कि div एक लिंक के रूप में कार्य कर रहा है।

— केल्विन
स्रोत

14

सबसे साफ तरीका HTML में शुरू किए गए डेटा-टैग के साथ jQuery का उपयोग करना होगा। इस समाधान से आप अपने इच्छित हर टैग पर एक लिंक बना सकते हैं। पहले डेटा-लिंक टैग के साथ टैग (जैसे div) को परिभाषित करें:

<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>

अब आप अपनी इच्छानुसार डीआई को स्टाइल कर सकते हैं। और आपको "लिंक" शैली के लिए शैली भी बनानी होगी:

[data-link] {
  cursor: pointer;
}

और अंत में पेज पर इस jQuery कॉल डाल दिया:

$(document).ready(function() {
  $("[data-link]").click(function() {
    window.location.href = $(this).attr("data-link");
    return false;
  });
});

इस कोड के साथ jQuery उस पृष्ठ के प्रत्येक टैग पर एक क्लिक श्रोता को लागू करता है, जिसके पास "डेटा-लिंक" विशेषता होती है और वह URL जो डेटा-लिंक विशेषता में होता है, को रीडायरेक्ट करता है।

— एरहद दीन्होबल
स्रोत

डेटा-विशेषताओं के बारे में जानकारी प्राप्त करने के लिए देखें: ejohn.org/blog/html-5-data-attributes

— Erhard Dinhobl

13

यकीन नहीं होता कि यह वैध है लेकिन इसने मेरे लिए काम किया।

कोड :

<div style='position:relative;background-color:#000000;width:600px;height:30px;border:solid;'>
  <p style='display:inline;color:#ffffff;float:left;'> Whatever </p>     
  <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a>
</div>

स्निपेट का विस्तार करें

— टिम
स्रोत

9

IE 7 में एपियर के उत्तर को काम करने और आगे बढ़ाने के लिए, इसे कुछ ट्विक्स की आवश्यकता होती है।

यदि तत्व में कोई पृष्ठभूमि-रंग नहीं है, तो IE z- इंडेक्स का सम्मान नहीं करेगा, इसलिए लिंक में कॉन्टिग डिव के उन हिस्सों को ओवरलैप नहीं किया जाएगा जिनमें सामग्री है, केवल रिक्त भाग। इसे ठीक करने के लिए एक पृष्ठभूमि को अपारदर्शिता 0 के साथ जोड़ा जाता है।
किसी कारण से IE7 और विभिन्न संगतता मोड पूरी तरह से एक लिंक दृष्टिकोण में स्पैन का उपयोग करते समय विफल हो जाते हैं। हालांकि अगर लिंक को ही स्टाइल दिया जाए तो यह ठीक काम करता है।

.blockLink  
{  
    position:absolute;  
    top:0;  
    left: 0;  
    width:100%;  
    height:100%;  
    z-index: 1;  
    background-color:#ffffff;   
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
    filter: alpha(opacity=0);  
    opacity:0;  
}

<div style="position:relative">  
    <some content>  
    <a href="somepage" class="blockLink" />  
<div>

— थॉमस शेहेलहार्ट
स्रोत

8

आप एक एंकर को लपेटकर भी कोशिश कर सकते हैं, फिर उसके माता-पिता के साथ उसकी ऊंचाई और चौड़ाई को बदल सकते हैं। यह मेरे लिए पूरी तरह से काम करता है।

<div id="css_ID">
    <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>

— wdonayredroid
स्रोत

1

आप यह भी सुनिश्चित कर सकते हैं कि पैरेंट डिव में जीरो पैडिंग हो और </ b> </ i> टैग में शून्य मार्जिन हो।

— नीलपो

4

क्यों नहीं? use <a href="bla"> <div></div> </a>HTML5 में ठीक काम करता है

— वामसी पावन महेश
स्रोत

यह HTML सत्यापन पास नहीं करेगा। लाइन आइटम ब्लॉक आइटम संग्रहीत नहीं कर सकता।

— Krzysztof Trzos

मेरा मतलब है, <div><span></span></div>यह मान्य है और <span><div></div></span>नहीं है। आपको display: inline;आइटम में display: block;आइटम का प्रकार नहीं रखना चाहिए । <a>टैग इनलाइन बॉक्स है।

— क्रिज़ीस्तोफ़ ट्राज़ोस

हाँ, यह काम कर सकता है, क्योंकि आप इसे कई तरीकों से (बेहतर या बदतर) कर सकते हैं। यह विशेष समाधान पुराने HTML सत्यापन के कारण अच्छा नहीं है :)।

— Krzysztof Trzos

1

क्या यह मायने रखता है कि "पुराने HTML सत्यापन" इसे पारित नहीं करते हैं? यह अभी अनुमति है, html5 और एक कारण के लिए तो इसका उपयोग क्यों नहीं? मुझे लगता है कि यह समाधान ठीक है (इसे अक्सर दिव्य सामग्री को रेखांकित करने की आवश्यकता होती है लेकिन फिर भी)।

— टोडिलो

@ टोडिलो क्योंकि <a><div></div></a>वैध है और काम करता है, <a><div><a></a></div></a>वैध नहीं है और काम नहीं करता है।

— coredumperror

3

यह पोस्ट पुरानी है, मुझे पता है, लेकिन मुझे सिर्फ उसी मुद्दे को ठीक करना था क्योंकि केवल डिस्प्ले के साथ एक सामान्य लिंक टैग को ब्लॉक करने के लिए लिखने से IE में पूरे डिव को क्लिक करने योग्य नहीं बनाया जाता है। तो इस मुद्दे को ठीक करने के लिए JQuery का उपयोग करने की तुलना में बहुत आसान है।

सबसे पहले हमें यह समझने दें कि ऐसा क्यों होता है: IE अभ्यस्त एक खाली डिव को क्लिक करने योग्य बनाता है यह केवल उस डिव के भीतर पाठ / छवि बनाता है / जो टैग योग्य है।

समाधान: एक बेकग्राउंड छवि के साथ div भरें और इसे दर्शक से छिपाएं।

कैसे? आप अच्छे प्रश्न पूछें, अब सुनें। इस बैकलॉग स्टाइल को टैग में जोड़ें

> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"

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

— मक्खी
स्रोत

धन्यवाद! मुझे एक छवि पर खाली एंकर के साथ एक इमेजमैप का अनुकरण करने की आवश्यकता थी और आईई केवल आपको क्लिक करेगा अगर सामग्री थी। यह तय किया।

— MDCore

2

बस ब्लॉक में लिंक है और इसे jquery के साथ बढ़ाएं। यह जावास्क्रिप्ट के बिना किसी के लिए भी 100% शालीनता से अपमानित करता है। HTML के साथ ऐसा करना वास्तव में सबसे अच्छा समाधान नहीं है। उदाहरण के लिए:

<div id="div_link">
<h2><a href="mylink.htm">The Link and Headline</a></h2>
<p>Some more stuff and maybe another <a href="mylink.htm">link</a>.</p>
</div>

फिर ब्लॉक को क्लिक करने योग्य बनाने के लिए jquery का उपयोग करें ( वेब डिजाइनर दीवार के माध्यम से ):

$(document).ready(function(){

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

});

फिर आपको बस इतना करना है कि div में कर्सर स्टाइल जोड़ें

    #div_link:hover {cursor: pointer;}

बोनस पॉइंट्स के लिए केवल इन शैलियों को लागू करें यदि जावास्क्रिप्ट को div, या शरीर या जो भी हो 'js_enabled' वर्ग जोड़कर सक्षम किया जाता है।

— जस्टिन
स्रोत

मैं इस का उपयोग करना चाहते हैं, लेकिन मैं div में 2 लिंक है ... मैं इसे कैसे संशोधित कर सकते हैं दोनों लिंक पर क्लिक करने में सक्षम हो? (यह वर्तमान में मुझे "mylink.html" पर ले जाता है, अगर मैं दूसरा लिंक भी क्लिक

— करूँ

2

इस उदाहरण ने मेरे लिए काम किया:

<div style="position: relative; width:191px; height:83px;">
    <a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>

— joan16v
स्रोत

2

यह मेरे लिए काम किया:

HTML:

<div>

  WHATEVER YOU WANT

  <a href="YOUR LINK HERE">
    <span class="span-link"></span>
  </a>

</div>

सीएसएस:

.span-link {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 9999;
}

यह एक अदृश्य तत्व (स्पैन) जोड़ता है, जो आपके पूरे div को कवर करता है, और ऊपर है z- इंडेक्स पर आपकी पूरी div के , इसलिए जब कोई व्यक्ति उस div पर क्लिक करता है, तो क्लिक को अनिवार्य रूप से आपके अदृश्य "स्पैन" लेयर द्वारा इंटरसेप्ट किया जाता है, जो जुड़ा हुआ है।

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

— जेफ श्वार्टिंग
स्रोत

मेरे लिए काम किया। बस मूल तत्व को अपेक्षाकृत स्थिति में मत भूलना।

— सैफ अल फलाह

1

वास्तव में आपको इस समय जावास्क्रिप्ट कोड को शामिल करने की आवश्यकता है, ऐसा करने के लिए इस ट्यूटोरियल की जांच करें ।

लेकिन सीएसएस कोड का उपयोग करके इसे हासिल करने का एक ट्रिकी तरीका है, आपको अपने div टैग के अंदर एक एंकर टैग को घोंसला बनाना होगा और आपको इस संपत्ति को उस पर लागू करना होगा,

display:block;

जब आपने ऐसा कर लिया है, तो यह पूरे चौड़ाई क्षेत्र को क्लिक करने योग्य बना देगा (लेकिन एंकर टैग की ऊंचाई के भीतर), यदि आप पूरे डिव क्षेत्र को कवर करना चाहते हैं, तो आपको एंकर टैग की ऊंचाई बिल्कुल ऊंचाई पर सेट करना होगा div टैग, उदाहरण के लिए:

height:60px;

यह पूरे क्षेत्र को क्लिक करने योग्य बनाता है, फिर आप आवेदन कर सकते हैं text-indent:-9999px लक्ष्य प्राप्त लिए लंगर टैग पर ।

यह वास्तव में मुश्किल और सरल है और यह सिर्फ CSS कोड का उपयोग करके बनाया गया है।

यहाँ एक उदाहरण है : http://jsfiddle.net/hbirjand/RG8wW/

— Hbirjand
स्रोत

1

यह बीबीसी वेबसाइट और अभिभावक के रूप में इसे करने का सबसे अच्छा तरीका है:

मुझे यहाँ तकनीक मिली: http://codepen.io/IschaGast/pen/Qjxpxo

HTML का उपयोग करता है

<div class="highlight block-link">
      <h2>I am an example header</h2>
      <p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p>

</div>

सीएसएस heres

/**
 * Block Link
 *
 * A Faux block-level link. Used for when you need a block-level link with
 * clickable areas within it as directly nesting a tags breaks things.
 */


.block-link {
    position: relative;
}

.block-link a {
  position: relative;
  z-index: 1;
}

.block-link .block-link__overlay-link {
    position: static;
    &:before {
      bottom: 0;
      content: "";
      left: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      white-space: nowrap;
      z-index: 0;
    }
    &:hover,
    &:focus {
      &:before {
        background: rgba(255,255,0, .2);
      }
    }
}

— jojojohn
स्रोत

1

<a href="…" style="cursor: pointer;"><div> … </div></a>

— फिलिप चाफी
स्रोत

0

मेरे लिए यह काम:

<div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>

— DejanR
स्रोत

0

आप निम्न विधि से अपने div का लिंक दे सकते हैं:

<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
    cursor:pointer;
    width:200px;
    height:200px;
    background-color:#FF0000;
    color:#fff;
    text-align:center;
    font:13px/17px Arial, Helvetica, sans-serif;
    }
</style>

— स्वर्णमयी मल्लिया
स्रोत

0

आप तत्व को href टैग्स से घेर सकते हैं या आप jquery और उपयोग कर सकते हैं

$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});

— अद्भुत
स्रोत

0

यह सबसे सरल तरीका है।

कहो, यह वह divब्लॉक है जिसे मैं क्लिक करने योग्य बनाना चाहता हूं:

<div class="inner_headL"></div>

तो एक hrefइस प्रकार है:

<a href="#">
 <div class="inner_headL"></div>
</a>

बस divब्लॉक को एक सामान्य HTML तत्व मानें और सामान्य hrefटैग को सक्षम करें ।
यह कम से कम एफएफ पर काम करता है।

— jeevanism
स्रोत

0

हालांकि मैं किसी भी परिस्थिति में ऐसा करने की सलाह नहीं देता, यहाँ कुछ कोड है जो एक लिंक में DIV बनाता है (नोट: यह उदाहरण jQuery का उपयोग करता है और सादगी के लिए कुछ मार्कअप हटा दिया जाता है):

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $("div[href]").click(function () {
        window.location = $(this).attr("href");
    });
});

</script>
<div href="http://www.google.com">
     My Div Link
</div>

— ब्रायन डेविड बर्मन
स्रोत

3

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

— सोवियुत

0

एक विकल्प जिसका उल्लेख नहीं किया गया है वह फ्लेक्स का उपयोग कर रहा है। टैग पर लागू flex: 1होने से a, यह कंटेनर को फिट करने के लिए फैलता है।

div {
  height: 100px;
  width: 100px;
  display: flex;
  border: 1px solid;
}

a {
  flex: 1;
}

<div>
  <a href="http://google.co.uk">Link</a>
</div>

स्निपेट का विस्तार करें

— द कोडेसे
स्रोत

-1

मैंने एक चर में खींच लिया क्योंकि मेरे लिंक में कुछ मूल्य इस आधार पर बदलेंगे कि उपयोगकर्ता किस रिकॉर्ड से आ रहा है। इसने परीक्षण के लिए काम किया:

   <div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>

और यह भी काम करता है:

   <div onclick="location.href='<%=Webpage%>';"  style="cursor:pointer;">...</div>

— बेकी
स्रोत

1

कोड किसी कारण से नहीं दिखाता है कि मैंने एक डायनामिक लिंक बनाने के लिए ऑनस्किक को एक जेएसपी वैरिएबल के साथ इस्तेमाल किया है

— becky

-3

मेरी चालाकी पैंट जवाब:

"इनवेसिव उत्तर:" ब्लॉक स्तर के तत्व को हाइपरलिंक कैसे बनाएं और XHTML 1.1 में मान्य करें "

बस HTML5 DOCTYPE DTD का उपयोग करें। "

वास्तव में ie7 के लिए सही नहीं था

onclick="location.href='page.html';"

IE7-9, क्रोम, सफारी, फ़ायरफ़ॉक्स,

— कार्ल केल्मन
स्रोत

वह "मैं एक एक्सएचटीएमएल 1.1 वैध तरीके की तलाश कर रहा हूं"

— मार्क

-4

अगर सब कुछ सरल हो सकता है ...

#logo {background:url(../global_images/csg-4b15a4b83d966.png) no-repeat top left;background-position:0 -825px;float:left;height:48px;position:relative;width:112px}

#logo a {padding-top:48px; display:block;}



<div id="logo"><a href="../../index.html"></a></div>

बस बॉक्स के बाहर थोड़ा सोचो ;-)

— फिलिप
स्रोत