Comment échangez-vous DIV sur mouseover? (Jquery?)

Ce sera le deuxième effet de survol le plus simple, mais je ne trouve pas de solution simple.

Recherché: J'ai une liste d'articles et une liste correspondante de diapositives (DIV). Après le chargement, le premier élément de liste doit être sélectionné (gras) et la première diapositive doit être visible. Lorsque l'utilisateur survient sur un autre élément de liste, cet élément de liste doit être sélectionné et la diapositive correspondante s'affiche.

Le code suivant fonctionne, mais c'est horrible . Comment puis-je obtenir ce comportement de manière élégante? Jquery a des dizaines d'effets de survol animés et compliqués, mais je n'ai pas trouvé un moyen propre pour cet effet.

<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>

Plutôt que d'afficher toutes les diapositives lorsque JS est désactivé (ce qui risquerait de briser la mise en page), je placerais dans le commutateur LIs réel. Un lien vers le code côté serveur qui renvoie la page avec la classe "active" préétablie sur le commutateur approprié /faire glisser.

 $(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>

Voici ma version jQuery light-markup:

 <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>

Cela a l'avantage de montrer toutes les diapositives si l'utilisateur a un javascript désactivé, utilise très peu de balisage HTML et le javascript est assez lisible. La fonction switchTo prend un numéro d'index dont <li> / <div> paire pour activer, réinitialise tous les éléments pertinents dans leurs styles par défaut (non gras pour les éléments de la liste, display:none pour les DIV) et définit la list-item souhaitée list-item et div à bold et display . Tant que le client a activé JavaScript, la fonctionnalité sera exactement la même que celle de votre exemple d'origine.

Voici la version 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>

 <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>

La seule chose qui ne va pas avec ce code (du moins pour moi) est que vous n'utilisez pas une boucle pour traiter tous les éléments. En dehors de cela, pourquoi ne pas l'être comme ça?

Et avec la boucle, je veux dire saisir l'élément conteneur via un JQuery et itérer sur tous les éléments enfants – essentiellement un one-liner.