html部分
<ul>
<!--onclick="showPic(this); return false;":因为onclick时间处理函数所触发的js代码返回给他的值是false,所以a链接不会跳转-->
<li><a href="1/1.jpg" onclick="showPic(this); return false;" title="我好不好看">我是一只小猫咪</a></li>
<li><a href="2/1.jpg" onclick="showPic(this); return false;" title="不认识我了">吓你一跳</a></li>
<li><a href="3/1.jpg" onclick="showPic(this); return false;" title="没见过吧">这样的瀑布见过吗</a></li>
</ul>
<img id='placeholder' src="1/1.jpg" alt="my image gallery">
<p id ='description'>45码的鞋子在你脸边徘徊</p>
js部分
function showPic(whichpic){
// whichpic:代表一个节点
// getAttribute:把href的路径作为参数存储到sourcr
var sourcr = whichpic.getAttribute("href");
// 获取idplaceholder
var placeholder=document.getElementById('placeholder');
// 使用setAttribute对placeholder元素的src属性进行刷新
// 将图片的路径刷新
placeholder.setAttribute("src",sourcr);
// 更新描述
var text = whichpic.getAttribute('title');
// 获取id 为description的值
var description = document.getElementById("description");
// 测试是否可以获得数据
// firstChild:返回节点的第一个子节点
// nodeValue:得到第一个节点的值
// console.log(description.firstChild.nodeValue);
// 将text赋值给description,是description达到点击之后改变的效果
description.firstChild.nodeValue =text;
}
css部分
body{
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;
width:400px;
height:400px;
}
执行效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/f5958f11ff718e6ef1413474f022c3fe.png#pic_center)