Databases
StackOverflow2013
Postsdbo
POHow do you swap DIVs on mouseover? (jquery?)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do you swap DIVs on mouseover? (jquery?)
    text
    copied!<p>This most be the second most simple rollover effect, still I don't find any simple solution.</p> <p><strong>Wanted:</strong> I have a list of items and a correspoding list of slides (DIVs). After loading, the first list item should be selected (bold) and the first slide should be visible. When the user hovers over another list item, that list item should be selected instead and the corresponding slide be shown.</p> <p>The following code works, but <em>is awful</em>. How can I get this behavior in an elegant way? jquery has dozens of animated and complicated rollover effects, but I didn't come up with a clean way for this effect.</p> <pre><code>&lt;script type="text/javascript"&gt; 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'; } &lt;/script&gt; &lt;ul id="switches"&gt; &lt;li id="switch1" onmouseover="switchTo(1);" style="font-weight:bold;"&gt;First slide&lt;/li&gt; &lt;li id="switch2" onmouseover="switchTo(2);"&gt;Second slide&lt;/li&gt; &lt;li id="switch3" onmouseover="switchTo(3);"&gt;Third slide&lt;/li&gt; &lt;li id="switch4" onmouseover="switchTo(4);"&gt;Fourth slide&lt;/li&gt; &lt;/ul&gt; &lt;div id="slides"&gt; &lt;div id="slide1"&gt;Well well.&lt;/div&gt; &lt;div id="slide2" style="display:none;"&gt;Oh no!&lt;/div&gt; &lt;div id="slide3" style="display:none;"&gt;You again?&lt;/div&gt; &lt;div id="slide4" style="display:none;"&gt;I'm gone!&lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload