可以自行进行测试，images可以自己在网上找。下编将介绍最佳实践并修正我们下面的代码！
1. 编写一个优秀的标记文件
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Image Gallery</title> </head> <body> <h1>Snapshots</h1> <ul> <li> <a href="images/fireworks.jpg" title="A fireworks display" onclick="showPic(this); return false;">Fireworks</a> // return false是为了阻止链接的默认行为 </li> <li> <a href="images/coffee.jpg" title="A cup of black coffee" onclick="showPic(this); return false;">Coffee</a> </li> <li> <a href="images/rose.jpg" title="A red, red rose" onclick="showPic(this); return false;">Rose</a> </li> <li> <a href="images/bigben.jpg" title="The famous clock" onclick="showPic(this); return false;">Big Ben</a> </li> </ul> <img src="images/placeholder.gif" alt="my image gallery" id="placeholder"> <script src="scripts/showPic.js"> </script> </body> </html>
2.编写一个JS函数以显示用户想要查看的图片及其文本
function showPic(whichpic){ // 切换照片 var source = whichpic.getAttribute("href"); var placeholder = document.getElementById("placeholder"); placeholder.setAttribute("src",source); // 切换文本 var text = whichpic.getAttribute("title"); var description = document.getElementById("description"); description.firstChild.nodeValue = text; }
3.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; } img { display:block; clear: both; }
原文：https://www.cnblogs.com/starboy13/p/13457169.html