Collection
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的相册</title>
<style type="text/css">
.box{
width:500px;
heiht:700px;
margin:30px auto;
border:1px double #ccc;
background-color:#eee;
text-align:center;
}
.box ul{
margin: 0;
padding:0;
overflow:hidden;
}
.box ul li{
list-style:none;
float:left;
line-height:40px;
background-color:lightskyblue;
border-radius:5px;
margin-left:20px;
color:#eee;
}
.box ul li a{
text-decoration-line:none;
display:block;
width:100px;
height:40px;
}
.box ul li a:hover{
background-color:coral;
cursor:pointer;
font-size:1.2em;
border-radius:10px;
}
.box .pic{
border:1px solid #ccc;
width:450px;
height:450px;
margin:50px auto 0;
}
.box .pic img{
width:100%;
height:100%;
}
.box p{
font-size:16px;
color:orange;
}
</style>
</head>
<body>
<div class="box">
<h3>个人相册</h3>
<ul>
<li><a href="images/1.png" title="我的相册1:家人相册">相册1</a></li>
<li><a href="images/2.png" title="我的相册2:同学相册">相册2</a></li>
<li><a href="images/3.png" title="我的相册3:同事相册">相册3</a></li>
<li><a href="images/4.png" title="我的相册4:爱情相册">相册4</a></li>
</ul>
<div class="pic">
<img src="images/1.png" title="相册1" id="img">
</div>
<p id="info"></p>
</div>
<script>
//获取页面中所有a标签
let pic = document.getElementsByTagName('a');
//循环获取
for(let i=0;i<pic.length;i++){
pic[i].onclick = function() {
document.getElementById('img').src = pic[i].href;
document.getElementById('info').innerHTML = pic[i].title;
return false;
};
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
