<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Pictuere</h1>
<ul>
<li> <a href="images/DJ震荡-娑娜.jpg">one</a> </li>
<li> <a href="images/源计划-易.jpg" > two</a> </li>
<li> <a href="images/三国-黛安娜.jpg" >three</a> </li>
<li> <a href="images/恐惧新星-普朗克.jpg" > four</a> </li>
<li> <a href="images/沙暴-艾克.jpg" >five</a> </li>
</ul>
<img id="picture" src="images/baidu.png" alt="picture">
<script>
var a = document.getElementsByTagName("a");
for (let i = 0; i <= a.length-1; i++) {
a[i].onclick = function (event) {
var picture = document.getElementById("picture");
var href=a[i].getAttribute("href");
picture.setAttribute("src",href);
return false;
}
}
</script>
</html>
创作好页面后,利用dom的geteEementByTagname获得a标签的节点,因为返回的是一个数组,所以要利用for循环获得所有标签,在添加一个a的标签的点击事件。
因为要在本页面显示,所以也要先创建一个img框,在获得img的src属性,把a标签的href属性便给img的src属性是实现图片的转换。
return false用于让a标签认为没有触发,才能使图片不会跳转到其他页面。
效果展示