Javacript圖片加載,點擊鏈接在同一界面顯示

利用知識點:

  1. getAttribute()獲得屬性方法
  2. setAttribute()設置屬性方法
  3. 阻止a默認跳轉的方式return false;  前提在href不爲空的時候

代碼展示

html

<ul>
  <li>
    <a href="images/aa.jpg" onclick="imgShow(this);return false;"></a>
  </li>
  <li>
    <a href="images/bb.jpg" onclick="imgShow(this);return false;"></a>
  </li>
  <li>
    <a href="images/cc.jpg" onclick="imgShow(this);return false;"></a>
  </li>
</ul>
<!--指定圖片顯示的位置-->
<src id="showImg" src="images/aa.jpg">

javascript

function imgshow(imghref){
//獲取圖片存放的路徑
var imgsrc=imghref.setAttribute("href");
var imgBox=document.getElementById("showimg");
imgBox.setAtttibute("src",imgsrc);
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章