收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网络相册</title>
</head>
<body>
<a href="image/p1.png" title="998" id="img1">图一</a>
<a href="image/p2.png" title="888" id="img2">图二</a>
<a href="image/p3.png" title="777" id="img3">图三</a>
<div class="">
<img src="image/logon.png" alt="" id="img4" style="width: 400px">
</div>
<p></p>
<script>
//获取全部相册链接
var a = document.getElementsByTagName('a');
//循环赋予点击事件
for(var i=0;i<a.length;i++){
a[i].onclick = function () {
// alert('123');
//获取当前a标签的href属性
var h = this.getAttribute('href');
//获取当前a标签title属性
var str = this.getAttribute('title');
//获取图片站位元素
var img = document.getElementsByTagName('img')[0];
//获取文字站位元素
var p = document.getElementsByTagName('p')[0];
//改变文字站位内容
p.innerHTML = str;
//给图片站位元素设置属性
img.setAttribute('src',h);
//禁用a标签自带跳转属性
return false;
}
}
</script>
</body>
</html>原理：当点击链接时，替换站位元素属性。达到网络相册目的
步骤：1.通过循环给所有a标签赋予点击事件
2.通过 this.getAttribute("属性")，获取属性值
3.通过 this.setAttribute("被替换属性名"，代替属性)
attribute 属性 attribute attribute
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
