Wie tauscht man DIVs beim Mouseover aus (jQuery)?

StackOverflow https://stackoverflow.com/questions/34536

  •  09-06-2019
  •  | 
  •  

Frage

Dies ist wahrscheinlich der zweiteinfachste Rollover-Effekt, dennoch finde ich keine einfache Lösung.

Gesucht: Ich habe eine Liste von Elementen und eine entsprechende Liste von Folien (DIVs).Nach dem Laden sollte das erste Listenelement ausgewählt (fett) und die erste Folie sichtbar sein.Wenn der Benutzer mit der Maus über ein anderes Listenelement fährt, sollte stattdessen dieses Listenelement ausgewählt und die entsprechende Folie angezeigt werden.

Der folgende Code funktioniert, aber ist schrecklich.Wie kann ich dieses Verhalten auf elegante Weise erreichen?jquery verfügt über Dutzende animierter und komplizierter Rollover-Effekte, aber ich habe keinen sauberen Weg für diesen Effekt gefunden.

<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>
War es hilfreich?

Lösung

Anstatt alle Folien anzuzeigen, wenn JS ausgeschaltet ist (was wahrscheinlich das Seitenlayout zerstören würde), würde ich in den LIs des Schalters echte A-Links zum serverseitigen Code platzieren, der die Seite mit der auf dem richtigen Schalter voreingestellten „aktiven“ Klasse zurückgibt /gleiten.

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

Andere Tipps

Hier ist meine Light-Markup-jQuery-Version:

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

Dies hat den Vorteil, dass alle Folien angezeigt werden, wenn der Benutzer Javascript deaktiviert hat, sehr wenig HTML-Markup verwendet und das Javascript gut lesbar ist.Der switchTo Die Funktion benötigt eine Indexnummer davon <li> / <div> Wenn Sie ein Paar aktivieren, werden alle relevanten Elemente auf ihre Standardstile zurückgesetzt (nicht fett für Listenelemente, display:none für die DIVs) und stellt das gewünschte ein list-item Und div Zu bold Und display.Solange der Client Javascript aktiviert hat, ist die Funktionalität genau die gleiche wie in Ihrem ursprünglichen Beispiel.

Hier ist die jQuery-Version:

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

Das Einzige, was an diesem Code falsch ist (zumindest für mich), ist, dass Sie keine Schleife verwenden, um alle Elemente zu verarbeiten.Ansonsten, warum nicht so?

Und mit Schleife meine ich das Ergreifen des Containerelements über eine JQuery und das Durchlaufen aller untergeordneten Elemente – im Grunde ein Einzeiler.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top