求帮忙看下这段代码，为什么没有效果
<!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>
慕粉40843402回答
-
stone310
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}让鼠标移上去有手指形状
随时随地看视频慕课网APP
Html/CSS
Html5
JavaScript