एंकर टैग

Question

के अंदर एंकर टैग बनाना मेरे यादृच्छिक परीक्षण के दौरान मैंने एक व्यवहार देखा जहां मैंने एक अन्य एंकर टैग के अंदर एक एंकर टैग लगाया। मैंने jsfiddle बनाया।

<a class="groupPopper"> 
    <a class="name"> content</a> 
</a>​ 

लेकिन डेवलपर उपकरण में यह अलग दिखाई देता है:

मेरा मानना ​​है कि हम आंतरिक लंगर इच्छा बबल सामने क्लिक करें घटना के लिए पर क्लिक करने के रूप में एक और लंगर टैग के अंदर एक लंगर टैग नहीं डाल सकते अभिभावक एंकर टैग जिसे अनुमति नहीं दी जानी चाहिए।

क्या मेरी धारणा सही है?

Answer 1

जैसा कि @ j08691 वर्णन करता है, नेस्टेड a तत्व HTML वाक्यविन्यास में प्रतिबंधित हैं। एचटीएमएल विनिर्देशों का कहना नहीं है क्यों; वे सिर्फ नियम पर जोर देते हैं।

व्यावहारिक पक्ष पर, ब्राउज़र प्रभावी रूप से इस प्रतिबंध को अपने पार्सिंग नियमों में लागू करते हैं, इसलिए कई अन्य मुद्दों के विपरीत, चश्मे का उल्लंघन करने से बस काम नहीं करेगा। पार्सर्स एक खुले a तत्व के अंदर प्रभावी टैग को प्रभावी ढंग से इलाज करते हैं क्योंकि एक नया शुरू करने से पहले खुले तत्व को स्पष्ट रूप से समाप्त कर दिया जाता है।

तो यदि आप <a href=foo>foo <a href=bar>bar</a> zap</a> लिखते हैं, तो आपको घोंसला वाले तत्व नहीं मिलेंगे। ब्राउज़र इसे <a href=foo>foo</a> <a href=bar>bar</a> zap के रूप में पार्स करेंगे, यानी कुछ सादे पाठ के बाद लगातार दो लिंक के रूप में।

नेस्टेड a तत्वों के साथ स्वाभाविक रूप से अजीब कुछ भी नहीं है: उन्हें लागू किया जा सकता है ताकि "foo" या "zap" पर क्लिक करने से बाहरी लिंक सक्रिय हो जाए, "बार" पर क्लिक करने से आंतरिक लिंक सक्रिय हो जाता है। लेकिन मुझे ऐसी संरचना का उपयोग करने का कोई कारण नहीं दिख रहा है, और एचटीएमएल के डिजाइनरों ने शायद एक को नहीं देखा है, इसलिए उन्होंने इसे मना करने और इस तरह चीजों को सरल बनाने का फैसला किया। ।

(तुम सच में नेस्टेड लिंक अनुकरण करने के लिए चाहते हैं तो आपके भीतर की "लिंक" के रूप में एक उपयुक्त ईवेंट हैंडलर के साथ बाहरी कड़ी के रूप में एक सामान्य लिंक और एक span तत्व इस्तेमाल कर सकते हैं या फिर, आप लिंक नकल कर सकते हैं: <a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>।)

Answer 2

यह अवैध HTML है।

आप a तत्वों को घोंसला नहीं दे सकते।

तो, परिभाषा के अनुसार, व्यवहार अपरिभाषित है।

Answer 3

Nested links are illegal.

लिंक और एंकर एक तत्व द्वारा परिभाषित नहीं लगाए गए किया जाना चाहिए; ए तत्व में कोई अन्य तत्व नहीं होना चाहिए।

Answer 4

यह कोडिंग के एक बुरा तरीका है, लेकिन आप इस कोशिश कर सकते हैं -

< a href = > aaaa < तालिका > < टीआर > < टीडी > < a href = > bbbb </> </टीडी > </tr > </तालिका > </>

Answer 5

ऐसा मत करो। मुझे अपने ऐप में एक ही समस्या का सामना करना पड़ रहा था। आप बच्चे स्तर पर शीर्ष पर <div> टैग और <a> टैग जोड़ सकते हैं। कुछ की तरह:

<div id="myDiv"><a href="#"></a> 
    <a href="#"></a> 
</div> 

यकीन है कि आप अपने स्क्रिप्ट फ़ाइल में myDiv के लिए क्लिक करें घटना जोड़ें।

window.location.href = "#dashboardDetails";

Answer 6

मैं इस मुद्दे पर ठोकर खाई जब भी बटन द्वारा एक div पैनल क्लिक करने योग्य बनाने की कोशिश कर। कामकाज जो मैं अनुशंसा करता हूं वह जावास्क्रिप्ट घटनाओं का उपयोग करना है।

यहाँ एक codepen उदाहरण मैं बनाया है .... http://codepen.io/thinkbonobo/pen/gPxJGV

यहाँ यह के HTML भाग है:

लिंक में एम्बेडेड लिंक का उदाहरण ....

<div class=panel onclick="alert('We\'ll hi-ii-ii-ide')"> 
    If you say run<br> 
    <button onclick="app.hitMe(event)">more</button><br> 
    <br> 
    And if you say hide...<br> 
</div> 

सूचना आंतरिक लिंक के लिए घटना कैप्चर की जाती है और स्टॉपप्रॉपेशन() का उपयोग कैसे किया जाता है। यह सुनिश्चित करना महत्वपूर्ण है कि बाहरी ट्रिगर नहीं चल रहा है।

Answer 7

आप 'ए' टैग घोंसला नहीं कर सकते हैं। इसके बजाय बाहरी कंटेनर को 'स्थिति: रिश्तेदार' और दूसरा 'ए' के ​​रूप में 'स्थिति: पूर्ण' के रूप में सेट करें और इसके जेड-इंडेक्स मान को बढ़ाएं। आप एक ही प्रभाव प्राप्त करेंगे।

<div style="position:relative"> 
<a href="page2.php"><img src="image-1.png"></a> 
<a style="position:absolute;top:0;z-index:99" href="page1.php"></a> 
</div> 

Answer 8

आप इस समस्या को हल करने के लिए ऑब्जेक्ट टैग का उपयोग कर सकते हैं। जैसे

<a><object><a></a></object></a>