<!doctype html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <ul> <li> <a href="1.jpg" onclick="showPic(this)" title="A fireworks display">第一张图片</a> </li> <li> <a href="2.jpg" title="A cup of black coffee">第二张图片</a> </li> <li> <a href="3.jpg">第三张图片</a> </li> <img id="img1" src="4.jpg"> </ul> <script type="text/javascript"> window.onload=function() { function showPic(whichpic) { var source=whichpic.getAttribute('href') var placeholder=document.getElementById('img1') placeholder.setAttribute("src",source) } } </script> </body></html>
2 回答
已采纳
stone310
TA贡献361条经验 获得超191个赞
1、先删去window.onload，否则showPic在函数作用域内，外界无法获取；
2、因为点击后，会跳入href的地址，因此要将href动作屏蔽掉，如下：
<body>
<ul>
<li>
<a href="1.jpg" onclick="return showPic(this)" title="A fireworks display">第一张图片</a>
<!-- 这里onclick要这么写 -->
</li>
<li>
<a href="2.jpg" title="A cup of black coffee">第二张图片</a>
</li>
<li>
<a href="3.jpg">第三张图片</a>
</li>
<img id="img1" src="4.jpg">
</ul>
<script type="text/javascript">
function showPic(whichpic) {
var source = whichpic.getAttribute('href')
var placeholder = document.getElementById('img1')
placeholder.setAttribute("src", source);
return false; //增加return false使其停止执行<a>的href步骤,onclick里面方法如上所写
}
</script>
</body>3、另外除了2方法，还有个方法，将href这个属性名随便换成一个自己定义的名字，如：<a img="1.jpg"......，当然底下的JS代码中的“href”也要换成“img”；再给<a>标签加上css：a{ cursor: pointer}让鼠标移上去有手指形状
添加回答
举报
0/150
提交
取消