<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { font-family: "Helvetica","Arial",serif; color: #333; background-color: #ccc; margin: 1em 10%; } h1 { color: #333; background-color: transparent; } a { color: #c60; background-color: transparent; font-weight: bold; text-decoration: none; } ul { padding: 0; } li { float: left; padding: 1em; list-style: none; } #imagegallery { list-style: none; } #imagegallery li { margin: 0px 20px 20px 0px; padding: 0px; display: inline; } #imagegallery li a img { border: 0; } </style> </head> <body> <h2> 美女画廊 </h2> <ul id="imagegallery"> <li><a href="../images/meinv/1.jpg" title="美女A"> <img src="../images/meinv/1-small.jpg" width="100" alt="美女1" /> </a></li> <li><a href="../images/meinv/2.jpg" title="美女B"> <img src="../images/meinv/2-small.jpg" width="100" alt="美女2" /> </a></li> <li><a href="../images/meinv/3.jpg" title="美女C"> <img src="../images/meinv/3-small.jpg" width="100" alt="美女3" /> </a></li> <li><a href="../images/meinv/4.jpg" title="美女D"> <img src="../images/meinv/4-small.jpg" width="100" alt="美女4" /> </a></li> </ul> <div style="clear:both"></div> <img id="image" src="../images/meinv/placeholder.png" alt="" width="450px" /> <p id="des">选择一个图片</p> <script src="../jquery-1.12.4.js"></script> <script> $(function () { $('#imagegallery>li>a').click(function () { //获取当前点击的a标签的href属性的值和title属性的值。 var srcValue = $(this).attr('href'); var contentValue = $(this).attr('title'); //给img标签的src属性赋值，以及给p标签的内容赋值。 $('#image').attr('src',srcValue); $('#des').text(contentValue); //阻止a标签的跳转 return false; }); }); </script> </body> </html>
思路：
//1.需求
//给小图片a标签设置一个单击事件.
//让id为image的img标签修改src属性为当前点击的a标签的href属性的值
//让id为des的这个p标签的文本设置为当前点击的这个a标签的title属性的值.
效果图：
点击上方的小图片，下面显示对应的大图片
