मैंने एक वेब पेज लिखा है जिसमें लिंक सभी अपने टैग के भीतर हैं। मैंने उन्हें सीएसएस (सीमा, पृष्ठभूमि रंग, पैडिंग) के साथ सभी बटन शैलियों को भी बनाया है। मैं लिंक को सक्रिय करने के लिए पूरे डीआईवी को क्लिक करने के लिए कैसे सक्षम करूं?एक डीआईवी अनुभाग कैसे क्लिक करने योग्य बनाने के लिए?
प्रभाव इस तरह का करने के लिए सबसे अच्छा तरीका है (बनाने लिंक बटन की तरह काम) सीएसएस लागू करने के लिए है खुद को लिंक करने के लिए। यहां एक मूल उदाहरण दिया गया है:
a.mylink {
display: block;
padding: 10px;
width: 200px;
background-color: #000;
color: #fff;
}
इसका परीक्षण करें - पूरा बटन क्लिक करने योग्य है। और यह सम्मान करता राइट क्लिक, स्थिति यूआरएल जानकारी, आदि
कुछ लोगों के लिए नया क्या हो सकता है लिंक पर "प्रदर्शन: ब्लॉक" जोड़ रहा है। डिफ़ॉल्ट रूप से डीआईवी "ब्लॉक" स्तर होते हैं, लिंक "इनलाइन" होते हैं। यदि आप एक इनलाइन तत्व को div (और अन्य ब्लॉक तत्व) की तरह कार्य करने के लिए चाहते हैं तो बस इसे ऊपर "प्रदर्शन: ब्लॉक" दें। –
धन्यवाद। मैं बस एक सवाल पूछने वाला था कि आपकी टिप्पणी ने मुझे कैसे ठीक किया है! – chustar
यदि आप क्लिक करने योग्य बनाना चाहते हैं तो यह काम नहीं करेगा यदि आप टैग के अंदर divs को एम्बेड नहीं कर सकते हैं। – Head
मुझे लगता है कि आपको अपने लिंक को "ए" टैग्स के लिए सीएसएस लिखना था, बजाय अपने लिंक को divs में डालने और सीएसएस के साथ तेजस्वी divs डालने की बजाय।
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
/*********************/
/* SIDEBAR */
/*********************/
#sidebar {
width: 160px;
float: left;
margin-top: 10px;
}
#news {
margin: 0px;
padding: 0px;
list-style: none;
font-size: 1.2em;
border-top: 1px dashed #294E56;
border-right: 1px dashed #294E56;
}
#news li {
display: inline;
}
#news .title {
font-weight: bold;
display: block;
color: #666666;
}
#news a {
text-decoration: none;
display: block;
padding: 5px;
border-bottom: 1px dashed #294E56;
color: #73AFB7;
line-height: 110%;
background: #FFFFFF url(images/bg/bg_link.png) no-repeat right top;
}
/* hack for IE 6 < to make entire block clickable */
* html #news a {
height: 1px;
}
#news a:hover {
color: #000000;
background-image: url(images/bg/bg_link_h.png);
}
</style>
</head>
<body>
<div id="sidebar">
<ul id="news">
<li><a href="#"><span class="title">Virgo: It's Your Month</span>Lorem ipsum dolor site amet.</a></li>
<li><a href="#"><span class="title">Your Feedback </span>Lorem ipsum dolor site amet.</a></li>
<li><a href="#"><span class="title">This Month's Survey </span>Lorem ipsum dolor site amet.</a></li>
<li><a href="#"><span class="title">Indoor lawns: sod or seed? </span>Lorem ipsum dolor sit.</a></li>
<li><a href="#"><span class="title">Lorem Ipsum </span>Lorem ipsum dolor site amet.</a></li>
<li><a href="#"><span class="title">Dolor site amet </span>Lorem ipsum dolor site amet.</a></li>
<li><a href="#"><span class="title">Adipiscing elit </span>Lorem ipsum dolor site amet.</a></li>
<li><a href="#"><span class="title">Euismod tincidunt </span>Lorem ipsum dolor site amet.</a></li>
<li><a href="#"><span class="title">Dolor site amet </span>Lorem ipsum dolor site amet.</a></li>
<li><a href="#"><span class="title">Dolor site amet </span>Lorem ipsum dolor site amet.</a></li>
</ul>
</div>
</body>
</html>
आप कार्रवाई यहाँ में देख सकते हैं: http://bazanov.net/sidebar
मैं चाहता था कि पूरी चीज क्लिक करने योग्य, टेक्स्ट और टेक्स्ट के आस-पास के क्षेत्र में हो। – chustar
शुद्ध सीएसएस के साथ यह आमतौर पर "ए" टैग के लिए और "ए" टैग के अंदर स्पैन के लिए सीएसएस का उपयोग करके पूरा किया जाता है। मैं जावास्क्रिप्ट समाधान के बारे में भूल गया, हालांकि, जैसा कि जे-पी ने टिप्पणी की थी, उपयोगकर्ता नहीं जानता कि DIV एक लिंक है और क्लिक करने योग्य है। – nightcoder
पीएस। और पूरी चीज शुद्ध सीएसएस के साथ क्लिक करने योग्य होगा। आपको बस अपने "ए" और आंतरिक "अवधि" टैग को ट्यून करने की आवश्यकता है। – nightcoder
मैं पता लगा इसे कैसे करना
यहाँ साइडबार के उदाहरण है। टैग में, उस संपत्ति में एक ऑनक्लिक संपत्ति बनाएं, window.location = (जहां आप जाना चाहते हैं) सेट करें। में के रूप में:
<DIV OnClick="window.location='http://stackoverflow.com'">
Content
</DIV>
बहुत बुरा अभ्यास! उपयोगकर्ता वास्तव में कैसे पता चलेगा कि DIV एक लिंक है? एंकरों को ब्राउज़र द्वारा अतिरिक्त व्यवहार संवर्द्धन का एक गुच्छा दिया जाता है - डीआईवी तत्व किसी भी तरह से बढ़ाया नहीं जाएगा। यह वास्तव में प्रयोज्यता का मामला है, या इसकी कमी है! – James
बेशक मेरे पास कुछ अन्य संकेत होंगे। वे बटन की तरह दिखते हैं, और जब वे माउस पर जाते हैं, तो मैं कर्सर को चयन चीज़ में बदलने के लिए सेट कर रहा हूं। यह सिर्फ समाधान दिखाने के लिए है जो मुझे मिली समस्या है। – chustar
उदाहरण देखें लांस मैकनेरनी ने पोस्ट किया। यह वही है जो आप खोज रहे थे और इसे जावास्क्रिप्ट की आवश्यकता नहीं है। – slosd
jQuery का उपयोग करके आप कुछ इसी तरह क्या कर सकते हैं chustar सुझाव दिया करने के लिए:
$(div#name).click(function(){
window.location = $('a:first', this).attr('href');
}).hover(function() {$(this).addClass('hovered')},
function() {$(this).removeClass('hovered')});
की तरह ब्राउज़र की सामान्य लिंक कार्यों आम तौर पर इस निम्नलिखित किसी एक तरीके से किया जाता है:
<div class='link_wrapper'>
<!-- there could be more divs here for styling -->
<a href='example.com'>GOto Example!</a>
</div>
.link_wrapper{
somestyles: values;
height: 20px; /*or whatever*/
width:auto;
padding:0px;
}
.link_wrapper a{
line_height:20px; /*same as .link_wapper*/
margin:0px;
}
अब पूरे div क्लिक करने योग्य है।
जावास्क्रिप्ट का उपयोग करना यह भी आसान है, यह आसानता के लिए jQuery का उपयोग कर रहा है, हालांकि आप jQuery के बिना यह बहुत आसान कर सकते हैं (यदि आप पहले से इसका उपयोग नहीं करते हैं)।
$('.link_wrapper')
.style('cursor', 'pointer') //very important, indicate to user that div is clickable
.click(function() {
window.location = $(this).find('a').attr('href');
}); //Do click as if user clicked actual text of link.
मैं अत्यधिक गैर जावास्क्रिप्ट उपयोगकर्ता के रूप में DIV में एक वास्तविक लिंक डालने की सलाह देते हैं, अगर वहाँ DIV में कोई वास्तविक कड़ी है नहीं लिंक का उपयोग करने में सक्षम हो जाएगा।
यह बहुत अच्छा है लेकिन जब आप इसे ओवरवर करते हैं तो यह स्टेटस बार में यूआरएल नहीं दिखाता है। – Head
इस प्रयास करें:
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
एक div क्लिक करने योग्य बनाने के लिए। इसके अंदर एक टैग डालें और इसे ब्लॉक तत्व के रूप में प्रदर्शित करें और इसे उसी चौड़ाई और ऊंचाई दें क्योंकि मैं इसे हर समय करता हूं।
कुछ कोड मदद करेंगे ... यह वास्तव में वास्तव में निर्भर करता है कि आप क्या मतलब रखते हैं और आप इसे कैसे संभालना चाहते हैं। – tvanfosson