博客列表 >DOM操作相册案例

DOM操作相册案例

枫的博客
枫的博客原创
2019年05月12日 21:56:27786浏览

5月8号作业

//仿照相册案例,写一个小案例,介绍一下你的家乡
一、仿相册案例的知识点
<script>
var pic =document.querySelectorAll('img')[0];  //pic就是第一个<img>
 var Info=document.getElementById('info');    //Info就是第一个<p>
 var obj =document.getElementsByTagName('a');  //找到当前所有的<a>
for (var i=0;i<obj.length;i++) {          //循环,因为不止一个<a>
    obj[i].onclick=function(){                     //某个点击事件
    for (var i=0;i<obj.length;i++) {            //循环去除所有的class(.active)
       obj[i].classList.remove('active');
        }
    this.classList.add('active');//或者this.className='active'   //给当前的a添加class(.active)
    pic.src=this.href;      //根据a的href改变src
    Info.innerHTML='<span style="color: coral">'+this.innerText+':'+this.title+'</span>';
    return false     //禁止a链接新窗口打开
    }
 }
 </script>
-------------------------------------------------------------------------------------------------------


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议