<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./js/jquery.min.js"></script> <style> img { width: 100px; height: 100px; } #content div { display: none; } li { list-style: none; } #content { width: 100px; height: 100px; overflow: hidden; /* display: none; */ } </style> </head> <body> <div class="wrapper"> <ul id="left"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> </ul> <div id="content"> <div> <a href=""><img src="./img/1.png" alt=""></a> </div> <div> <a href=""><img src="./img/2.png" alt=""></a> </div> <div> <a href=""><img src="./img/3.png" alt=""></a> </div> <div> <a href=""><img src="./img/1.png" alt=""></a> </div> <div> <a href=""><img src="./img/1.png" alt=""></a> </div> <div> <a href=""><img src="./img/2.png" alt=""></a> </div> <div> <a href=""><img src="./img/3.png" alt=""></a> </div> </div> </div> <script> $(function() { //鼠标经过左侧的小li $("#left li").mouseover(function() { //得到当前小li的索引号 var index = $(this).index(); //右侧的显示 $("#content div").eq(index).show(); //其余的影藏 $("#content div").eq(index).siblings().hide(); }); }) </script> </body> </html>
运行结果
