这个切换事件，用tagname做为什么没有效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.box {
width: 532px;
margin: 0px auto;
}
div img {
width: 532px;
}
ul {
list-style: none;
}
ul li{
float: left;
margin-left: 8px;
}
ul li:first-child {
margin-left: 0px;
}
ul li img {
width: 100px;
height: 52px;
}
</style>
</head>
<body>
<div class="box">
<div class="dv">
<img src="./images/fj1.jpg" alt="">
</div>
<ul>
<li><img src="./images/fj1-small.jpg" alt=""></li>
<li><img src="./images/fj2-small.jpg" alt=""></li>
<li><img src="./images/fj3-small.jpg" alt=""></li>
<li><img src="./images/fj4-small.jpg" alt=""></li>
<li><img src="./images/fj5-small.jpg" alt=""></li>
</ul>
</div>
</body>
<script>
var dv = document.getElementsByTagName(".dv img");
var lis = document.getElementsByTagName("ul li");
for(var i = 0; i < lis.length; i++){
lis[i].setAttribute("idx",i);
lis[i].onclick = function(){
var idx = parseInt(this.getAttribute("idx"));
dv.src = "./images/fj"+idx+".jpg"
}
}
</script>
</html>0
收起
正在回答
1回答
同学你好，因为代码中存在语法错误，导致没有效果， 建议参考下图注释修改：
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星