标签：lin html for a标签 学习 lang 不能 lse ack
这几天一直在学习和复习js最基础的东西，因为博主的基础很薄弱，所以正在一点点的学习。。
今天来用js实现一个最简单的相册。请看下图
像不像你妈妈的相册或者是你妈妈的头像。。。。话不多说，上代码
<!DOCTYPE html> <html> <head lang="en"> <title>相册</title> </head> <body> <h2>相册</h2> <div id="imagegallery"> <a href="1.jpg" title="图片A"> <img src="1.jpg" width="100" alt="图片1" /> </a> <a href="2.jpg" title="图片B"> <img src="2.jpg" width="100" alt="图片2" /> </a> <a href="3.jpg" title="图片C"> <img src="3.jpg" width="100" alt="图片3" /> </a> <a href="4.jpg" title="图片D"> <img src="4.jpg" width="100" alt="图片4" /> </a> </div> <div style="clear:both;"></div> <img id="image" src="1.jpg" alt="" width="450px" /> <p id="des">选择一个图片</p> <script> //1 获取所有的a标签 对应的元素 var imagegallery = document.getElementById(‘imagegallery‘); var links = imagegallery.getElementsByTagName(‘a‘); //2 给所有的a标签注册点击事件 var i = 0; len = links.length; for (; i < len; i++){ //获取当前元素 var link =links[i]; link.onclick = function(){ //3切换图片和文字 var image = document.getElementById(‘image‘); var des = document.getElementById(‘des‘); //设置图片 image.src = this.href;//这块不能用link原因是在执行click事件的时候循环已经执行完了 //设置文字 des.innerText = this.title //取消默认行为的执行 return false; } } </script> </body> </html>
以上就是全部的内容，这里面包含了几个基础的点，在上面的内容里都有具体的注释。
标签：lin html for a标签 学习 lang 不能 lse ack
原文地址：https://www.cnblogs.com/awjbky/p/12155502.html
