आप माउसओवर पर डीआईवी कैसे स्वैप करते हैं? (jquery?)

यह सबसे दूसरा सबसे आसान रोलओवर प्रभाव है, फिर भी मुझे कोई आसान समाधान नहीं मिला है।आप माउसओवर पर डीआईवी कैसे स्वैप करते हैं? (jquery?)

चाहता था: मेरे पास आइटमों की एक सूची है और स्लाइड की एक correspoding सूची (डीआईवी) है। लोड करने के बाद, पहली सूची आइटम का चयन किया जाना चाहिए (बोल्ड) और पहली स्लाइड दिखाई देनी चाहिए। जब उपयोगकर्ता किसी अन्य सूची आइटम पर हो जाता है, तो उस सूची आइटम को इसके बजाय चुना जाना चाहिए और इसी स्लाइड को दिखाया जाना चाहिए।

निम्नलिखित कोड काम करता है, लेकिन भयानक है। मैं इस व्यवहार को एक सुरुचिपूर्ण तरीके से कैसे प्राप्त कर सकता हूं? jquery में दर्जनों एनिमेटेड और जटिल रोलओवर प्रभाव हैं, लेकिन मैं इस प्रभाव के लिए एक साफ तरीके से नहीं आया था।

<script type="text/javascript"> 
function switchTo(id) { 
    document.getElementById('slide1').style.display=(id==1)?'block':'none'; 
    document.getElementById('slide2').style.display=(id==2)?'block':'none'; 
    document.getElementById('slide3').style.display=(id==3)?'block':'none'; 
    document.getElementById('slide4').style.display=(id==4)?'block':'none'; 
    document.getElementById('switch1').style.fontWeight=(id==1)?'bold':'normal'; 
    document.getElementById('switch2').style.fontWeight=(id==2)?'bold':'normal'; 
    document.getElementById('switch3').style.fontWeight=(id==3)?'bold':'normal'; 
    document.getElementById('switch4').style.fontWeight=(id==4)?'bold':'normal'; 
} 
</script> 

<ul id="switches"> 
    <li id="switch1" onmouseover="switchTo(1);" style="font-weight:bold;">First slide</li> 
    <li id="switch2" onmouseover="switchTo(2);">Second slide</li> 
    <li id="switch3" onmouseover="switchTo(3);">Third slide</li> 
    <li id="switch4" onmouseover="switchTo(4);">Fourth slide</li> 
</ul> 
<div id="slides"> 
    <div id="slide1">Well well.</div> 
    <div id="slide2" style="display:none;">Oh no!</div> 
    <div id="slide3" style="display:none;">You again?</div> 
    <div id="slide4" style="display:none;">I'm gone!</div> 
</div>

स्रोत

2008-08-29 flight

के बजाय सभी स्लाइड प्रदर्शित जब जे एस से बाहर है (जो की संभावना पेज लेआउट टूट जाएगा) मैं स्विच फूल असली एक लिंक सर्वर को अंदर कर देगी साइड कोड जो उचित स्विच/स्लाइड पर "सक्रिय" कक्षा प्री-सेट के साथ पृष्ठ लौटाता है।

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
function switchTo(i) { 
    $('#switches li').css('font-weight','normal').eq(i).css('font-weight','bold'); 
    $('#slides div').css('display','none').eq(i).css('display','block'); 
} 
$(document).ready(function(){ 
    $('#switches li').mouseover(function(event){ 
    switchTo($('#switches li').index(event.target)); 
    }); 
    switchTo(0); 
}); 
</script> 
<ul id="switches"> 
    <li>First slide</li> 
    <li>Second slide</li> 
    <li>Third slide</li> 
    <li>Fourth slide</li> 
</ul> 
<div id="slides"> 
    <div>Well well.</div> 
    <div>Oh no!</div> 
    <div>You again?</div> 
    <div>I'm gone!</div> 
</div>

यह सभी स्लाइड दिखा यदि उपयोगकर्ता जावास्क्रिप्ट बंद कर दिया गया है का लाभ दिया है, बहुत कम HTML मार्कअप का उपयोग करता है:

$(document).ready(function() { 
 
    switches = $('#switches > li'); 
 
    slides = $('#slides > div'); 
 
    switches.each(function(idx) { 
 
    $(this).data('slide', slides.eq(idx)); 
 
    }).hover(
 
    function() { 
 
     switches.removeClass('active'); 
 
     slides.removeClass('active'); 
 
     $(this).addClass('active'); 
 
     $(this).data('slide').addClass('active'); 
 
    }); 
 
});

#switches .active { 
 
    font-weight: bold; 
 
} 
 
#slides div { 
 
    display: none; 
 
} 
 
#slides div.active { 
 
    display: block; 
 
}

<html> 
 

 
<head> 
 

 
    <title>test</title> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script type="text/javascript" src="switch.js"></script> 
 

 
</head> 
 

 
<body> 
 

 
    <ul id="switches"> 
 
    <li class="active">First slide</li> 
 
    <li>Second slide</li> 
 
    <li>Third slide</li> 
 
    <li>Fourth slide</li> 
 
    </ul> 
 
    <div id="slides"> 
 
    <div class="active">Well well.</div> 
 
    <div>Oh no!</div> 
 
    <div>You again?</div> 
 
    <div>I'm gone!</div> 
 
    </div> 
 

 
</body> 
 

 
</html>

स्रोत

2008-08-29 16:49:56

ऐसा करने के बजाए मैं सलाह देता हूं कि मैं डेटा फ़ंक्शन का उपयोग करने की अनुशंसा करता हूं: $ (यह) .डेटा ('स्लाइड', स्लाइड [idx]); इस तरह आप डेटा के साथ डोम अव्यवस्थित नहीं करते हैं। –

अच्छा बिंदु, धन्यवाद। इस सुझाव को शामिल करने के लिए संपादित किया गया। –

एकमात्र चीज जो इस कोड के साथ गलत है (कम से कम मेरे लिए) यह है कि आप सभी तत्वों को संसाधित करने के लिए लूप का उपयोग नहीं कर रहे हैं। इसके अलावा, ऐसा क्यों नहीं है?

और लूप के साथ, मेरा मतलब है कि एक JQuery के माध्यम से कंटेनर तत्व को पकड़ना और सभी बाल तत्वों पर पुनरावृत्ति करना - मूल रूप से एक-लाइनर।

स्रोत

2008-08-29 16:08:41

यहाँ jQuery संस्करण है:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $("#switches li").mouseover(function() { 
     var $this = $(this); 
     $("#slides div").hide(); 
     $("#slide" + $this.attr("id").replace(/switch/, "")).show(); 
     $("#switches li").css("font-weight", "normal"); 
     $this.css("font-weight", "bold"); 
    }); 
}); 
</script> 

<ul id="switches"> 
    <li id="switch1" style="font-weight:bold;">First slide</li> 
    <li id="switch2">Second slide</li> 
    <li id="switch3">Third slide</li> 
    <li id="switch4">Fourth slide</li> 
</ul> 
<div id="slides"> 
    <div id="slide1">Well well.</div> 
    <div id="slide2" style="display:none;">Oh no!</div> 
    <div id="slide3" style="display:none;">You again?</div> 
    <div id="slide4" style="display:none;">I'm gone!</div> 
</div>

स्रोत

2008-08-29 16:21:23 travis

<html> 
<head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 

$(document).ready(
    function(){ 
    $('#switches li').mouseover(
     function(){ 
     $("#slides div").hide(); 
     $('#switches li').css('font-weight', 'normal'); 
     $(this).css('font-weight', 'bold'); 
     $('#slide' + $(this).attr('id').replace('switch', '')).show(); 
     } 
    ); 
    } 
); 

</script> 
</head> 
<body> 
<ul id="switches"> 
    <li id="switch1" style="font-weight:bold;">First slide</li> 
    <li id="switch2">Second slide</li> 
    <li id="switch3">Third slide</li> 
    <li id="switch4">Fourth slide</li> 
</ul> 
<div id="slides"> 
    <div id="slide1">Well well.</div> 
    <div id="slide2" style="display:none;">Oh no!</div> 
    <div id="slide3" style="display:none;">You again?</div> 
    <div id="slide4" style="display:none;">I'm gone!</div> 
</div> 
</body> 
</html>

स्रोत

2008-08-29 16:30:30

यहाँ मेरी प्रकाश मार्कअप jQuery संस्करण है और जावास्क्रिप्ट बहुत पठनीय है। switchTo समारोह है, जो <li>/<div> जोड़ी को सक्रिय करने के एक सूचकांक संख्या लेता है उनके डिफ़ॉल्ट शैलियों (सूची आइटम, DIVs के लिए display:none के लिए गैर बोल्ड) के लिए सभी प्रासंगिक तत्वों और सेट रीसेट करता है वांछित list-item और divbold और display को । जब तक क्लाइंट जावास्क्रिप्ट सक्षम हो, तब तक कार्यक्षमता आपके मूल उदाहरण के समान ही होगी।

स्रोत

2008-08-29 16:53:06 Neall

आप माउसओवर पर डीआईवी कैसे स्वैप करते हैं? (jquery?)

उत्तर

संबंधित मुद्दे