javascript - 单击 href 链接，div 显示图像

Question

我想要一个 javascript 方法来根据单击的 href 链接在 div 中显示图像。

我已经写了一些代码，但它需要进一步开发。

<script type="  ">
function changeImg(){
    var image1 = new Image();
    image1.src='car.png'
    var imghol = document.getElementById("imageHolder");
    var elements = document.getElementById("FS");
    if(elements.onclick = function()){
        imghol = image1;
    }
</script>

<div class="ADS2"><h2>Vehicle Part</h2><p>Please select a part you wish to find;
<div class="vertical_menu">
<ul>
<li><a id="FS" href="#home" onclick="changeImg">Front Side</a></li>
<li><a id="RS" href="#news">Rear Side</a></li>
<li><a id="S" href="#contact">Side</a></li>
<li><a id="US"href="#about">Under Side</a></li>
<li><a id="I" href="#about">Interior</a></li>
</ul>
</div>
<div class="imageholder">

</div>
</div>

Answer 1

保持简单。试试这个:

<script type="text/javascript">
function changeImg(image){
  var imghol = document.getElementById("imageHolder");
  imghol.src = image;
}
</script>

<div class="ADS2">
    <h2>Vehicle Part</h2>
    <p>Please select a part you wish to find;</p>
    <div class="vertical_menu">
        <ul>
            <li><a id="FS" href="javascript:" onclick="changeImg('car.jpg');">Front Side</a></li>
            <li><a id="RS" href="javascript:" onclick="changeImg('rear.png')">Rear Side</a></li>
            <li><a id="S" href="javascript:" onclick="changeImg('caside.png')">Side</a></li>
            <li><a id="US" href="javascript:" onclick="changeImg('under.png')">Under Side</a></li>
            <li><a id="I" href="javascript:" onclick="changeImg('interior.png')">Interior</a></li>
        </ul>
    </div>
    <div class="imageholder"><img id="imageHolder" /></div>
</div>