我不是在JS关闭的情况下显示所有幻灯片（这可能会破坏页面布局），而是将其放置在交换机中LIs real
A链接到服务器端代码，该代码返回在正确的交换机上预先设置了“活动”类的页面/滑动。
$(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 >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></body></html>
