<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
#placeholder{
width:400px;
height:400px;
}
</style>
<body>
<h1>图片</h1>
<ul id="imagegallery">
<li><a href="imaget/1.jpg">图片1</a></li>
<li><a href="imaget/2.jpg">图片2</a></li>
<li><a href="imaget/3.jpg">图片3</a></li>
<li><a href="imaget/4.jpg">图片4</a></li>
<li><a href="imaget/5.jpg">图片5</a></li>
</ul>
<img src="imaget/6.jpg" id="placeholder" alt="my image gallery"/>
<p id="box">这段文字将被切换</p>
</body>
<script src="JS/Untitled-2.js"></script>
</html>
下面是JS部分:
// JavaScript Document
function showpic(whichpic){
var placeholder=document.getElementById('placeholder'); //获取占位符的DOM
var source=whichpic.getAttribute("href"); //获取被点击图片的href
placeholder.setAttribute("src",source); //修改占位符的src地址
var p=document.getElementById("box");
p.childNodes[0].nodeValue=source;
}
function prepareGallery(){
if(!document.getElementById){return false};
if(!document.getElementsByTagName){return false};
if(!document.getElementById("imagegallery")){return false};
var placeholder=document.getElementById("imagegallery"); //获取UL的DOM
var links=placeholder.getElementsByTagName("a"); //获取UL的a标签集合
for(var i=0;i<links.length;i++){
links[i].oncilck=function(){
showpic(this);
return false;
}
}
}
window.onload=prepareGallery;
明明在函数orepareGallery对每个链接调用showPic函数条用,并且已经让它取消a标签的默认跳转行为。为何还是无效果?JS控制台也不报错,头晕!
慕田峪3555374
相关分类