/ / Div - jquery, html, के बाहर li तत्व द्वारा div को संदर्भित करने के लिए कैसे देखें

उस div - jquery, html, के बाहर li तत्व द्वारा div को कैसे संदर्भित करें

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

मैंने एक स्लाइड एलिमेंट्स ट्यूटोरियल का उपयोग किया है और कुछ जोड़ दिया हैमेरे वेबसाइड में div स्लाइडिंग, सब ठीक काम करता है लेकिन इस ट्यूटोरियल लेखक में पैरेंट div के अंदर एक बटन तत्व और आंतरिक div स्लाइड पर क्लिक करें। मैं अपने नेविगेशन सेक्शन के ली तत्व का उपयोग करना चाहता हूं जो divs के बाहर है लेकिन मुझे नहीं पता कि स्क्रिप्ट कोड को उस div में एनीमेशन रखने के लिए कैसे बदलें। असल में यह दिखता है:

HTML:

    <ul id="navigation">
<li class="about"><a title="A" href="#" > </a></li>
<li class="search"><a title="P" href="#" ></a></li>
<li class="photos"><a title="G" href="#" ></a></li>
<li class="rssfeed"><a title="U" href="#" ></a></li>
<li class="contact"><a title="K" href="#" ></a></li>
</ul>

<div id="IDcontent" class="slide" >
<button>slide it</button>
<div class="inner"  style="margin-left: 100%"> test </div>
</div>

मैं स्क्रिप्ट कोड को बदलने का प्रबंधन करता हूं कि एक ली तत्व क्लिक बटन को ट्रिगर करता है बटन नहीं, लेकिन क्लिक के बाद, यह div को स्लाइड नहीं करता है लेकिन यह अगले ली तत्व को स्लाइड करता है।

स्क्रिप कोड:

<script>

$(document).ready(function() {
$("#navigation li").click(function() {
var $marginLefty = $(this).next();
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css("marginLeft"),10) == 0 ?
$marginLefty.outerWidth() :
0
});
});
});

</script>

कोई भी परेशानी?

बहुत धन्यवाद!

उत्तर:

जवाब के लिए 0 № 1

कोड की इस पंक्ति के कारण,

var $marginLefty = $(this).next();

जिस पर क्लिक किया गया था उसके बाद अगला ली तत्व हैएनिमेटेड के बाद से आप $ marginLefty.animate () करते हैं। यदि आप div को एनिमेट करना चाहते हैं, तो आपको div तत्व को divinLefty सेट करना चाहिए। तो उस पंक्ति को इसके साथ बदलें:

var $marginLefty = $(".inner");

यह पता लगाने के लिए कि कौन सी ली क्लिक की गई थी, आप कर सकते हैं

// $(this) refers to the element that was clicked
$liClass = $(this).attr("class")

क्लिक हैंडलर के अंदर। फिर आप div की सामग्री को बदल सकते हैं जिस पर ली क्लिक किया गया था, और html () फ़ंक्शन का उपयोग करके। उदाहरण के लिए,

var content;
if($liClass == "about"){
content = "about clicked";
}
else if($liClass == "search"){
content = "search clicked";
}
//more code here
//more code here
$marginLefty.html(content);

आप यहां .attr () और .html () के बारे में अधिक जानकारी प्राप्त कर सकते हैं: http://api.jquery.com/attr/ तथा http://api.jquery.com/html/


जवाब के लिए 0 № 2

इसको आजमाओ:

   $(document).ready(function() {
$("#navigation li").click(function() {
var $marginLefty = $("a", this);
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css("marginLeft"),10) == 0 ?
$marginLefty.outerWidth() :
0
});
});
});

जवाब के लिए 0 № 3

अगर मैं इसे सही ढंग से समझता हूं, तो आप "एलआई तत्व को वही काम करना चाहते हैं जो बटन तत्व कर रहा है? आप बस बटन पर एक क्लिक ट्रिगर कर सकते हैं:

$(document).ready(function() {
$("#navigation li").click(function() {
$("#IDcontent").find("button").trigger("click");
});
});

आपके बटन तत्व पर बने रहने की आवश्यकता होगीपृष्ठ। यह मूल रूप से बटन के क्लिक ईवेंट से जुड़ा कोई भी कोड चलाएगा - जब भी आप अपने किसी भी एलआई तत्वों पर क्लिक करेंगे। आप इसे चयनकर्ता को बदलकर केवल 1 सूची तत्व पर काम करने के लिए सेट कर सकते हैं:

  $("#navigation li.about").click(function() {
...
});

यह इस कार्यक्षमता को ली क्लास = "लगभग" तत्व में ही संलग्न करेगा।

यह काम करता है अगर आप "छोड़ने की योजना बना रहे हैंअपने पेज पर बटन। आप बस सीएसएस में बटन को छुपा सकते हैं, लेकिन यह थोड़ा सा मैला है। अगर आप बटन को पूरी तरह से हटाने का निर्णय लेते हैं, तो बटन का उपयोग करने वाले जावास्क्रिप्ट कोड को ढूंढें। यह इस तरह दिखेगा:

$("#IDcontent button").click(function(){ ... });

या कुछ समान है। फिर बस उस कोड को बटन के क्लिक ईवेंट के अंदर सूची तत्व के लिए क्लिक ईवेंट में ले जाएं।