JS学习-a标签的onclick事件函数调用问题

希望在同一个页面中，点击图片链接，要求不进行跳转而是在对应的位置展示图片
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>learning JS</title>
    <link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>

      <div id="tupian">
              <ul>
                    <li>
                       <a href="image/1-1.jpg"   title="one"    onclick ="return false;changePic(this)">第一张图片</a>
                    <li>
                       <a href="image/1-2.jpg"   title="two"    onclick ="changePic(this);return false">第二张图片</a>
                    <li>
                       <a href="image/1-3.png"   title="three" >第三张图片</a>
                    <li>
                       <a href="image/1-4.png"   title="four">第四张图片</a>
              </ul>

              <img src="image/无标题.png"  title="seat"   id="yulan"/>
       </div>

      <script  type="text/javascript"   src="scripts/test1.js"></script>
</body>
</html>


/*图片切换函数*/
function changePic (yuansu){
  var vlaue =yuansu.getAttribute("href");
  var mubiao = document.getElementById("yulan");
   mubiao.setAttribute("src",value);
}
第一张图片点击没有任何反应，第二张图片点击会跳转到新页面 展示图片
希望点击后，在预览区切换图片

img

第一张图片 onclick ="return false;changePic(this)" 不对, return 之后的代码changePic(this)不会执行
第二张图片 onclick ="changePic(this);return false"正确, 但是你changePic函数中
var vlaue =yuansu.getAttribute("href"); 中vlaue变量名字写错了, 与下边 mubiao.setAttribute("src",value);中的value不一致,代码出错,这样changePic(this);之后的return false没有执行

var vlaue =yuansu.getAttribute("href");
改成
var value =yuansu.getAttribute("href");
即可

第一个 没反应 是 因为 你先return false了 。js 不会执行 return之后的代码。 至于点击 跳转 因为 你用的a标签当然跳转了 ，不想跳转 只能换别的 标签