基础笔记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>小结： 让下面的大图的src变为和小图相对应的大图 image.src=this.href; 改变des描述中的文本 des.innerText=this.title; return false;//阻止跳转
