DOM基础2之相册案例升级_dom相册-CSDN博客

本文链接：https://blog.csdn.net/smiple9102/article/details/61195517

基础笔记day01-0304
阻止a标签的默认跳转行为
点击小图片显示对应的大图以及改变描述中的文本

<body>
    相册画廊
    <hr />
<div id="box">
    <ul id="imagegallery">
        <li><a href="images/1.jpg" title="图片a"><img src="images/1small.jpg" alt="图片1" /></a></li>
        <li><a href="images/2.jpg" title="图片b"><img src="images/2small.jpg" alt="图片2" /></a></li>
        <li><a href="images/3.jpg" title="图片c"><img src="images/3small.jpg" alt="图片3" /></a></li>
        <li><a href="images/4.jpg" title="图片d"><img src="images/4small.jpg" alt="图片4" /></a></li>
    </ul>
</div>
    <div style="clear:both"></div>  
    <img id ="image" src="images/zwtp.jpg" alt=""  width="500px" />
    <p id="des">选择一个图片</p>
<script>
    //点击上面的小图片，让上面的大图片的src变成和小图相应的大图
    var ul=document.getElementById('imagegallery');
    **var image=document.getElementById('image');**
    **var des=document.getElementById('des');**
    var links=ul.getElementsByTagName('a');//ul里所有的a标签
    //给每个a标签绑定事件
    for (var i = 0; i < links.length; i++) {
        var link=links[i];
        link.onclick=function(){
            //alert("a");
            //让下面的大图的src变为和小图相对应的大图
            **image.src=this.href;**
            //改变des描述中的文本
            **des.innerText=this.title;**
            return false;//阻止跳转

        }

    }
</script>
</body>