知识点:
- getAttribute :获取标签属性;
- setAttribute : 设置标签属性;
用法实例:
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<a href="images/1.jpg">pic1</a>
<a href="images/2.jpg">pic2</a>
<a href="images/3.jpg">pic3</a>
<a href="images/4.jpg">pic4</a>
<a href="images/5.jpg">pic5</a>
<br><br>
<img src="images/1.jpg" alt="" id="pic">
</body>
</html>
实现效果是点击图中 pic1 pic2 pic3 pic4 pic5 切换到相应的图上
思路:
1. 点击事件
2. 获取img 和a的dom节点
var images=document.getElementById(‘pic’);
var aA=document.getElementsByTagName(‘a’);
3. 获取a标签中的href属性
var change=this.getAttribute(‘href’);
4. 将获取的a标签中的href属性赋值给img中的src属性
images.setAttribute(‘src’,change)
<script>
window.onload=function(){
var images=document.getElementById('pic');
var aA=document.getElementsByTagName('a');
for (var i = 0; i < aA.length; i++) {
aA[i].onclick=function(){
var change=this.getAttribute('href');
images.setAttribute('src',change)
return false;
}
}
}
</script>
注意:这里的retrun false 是为了阻止a标签的默认事件(跳转)